Lesson 3: Background Images

Overview

In this lesson, you will learn how to use background images as a way to further customize the design of your web site. You will explore at two types of background images, tiled images and large size images, and learn how to use CSS to apply both types as the background for a web page.

Learner Outcomes

At the completion of this exercise, you will be able to:

utilize the CSS background-image property to apply a background image to an element on the page.
utilize the CSS position, repeat, size and attachment properties of the background image to control how the image is displayed.
design or locate background images, both tiled and large size, for use as web backgrounds.

Adding a Background Image using CSS

In the earlier lesson on Applying Color in CSS, you used the background-color property to implement a color scheme for your portfolio page. In addition to modifying the background color of any element, you can also define an image to be used as a background using the background-image property. While you can accomplish some very nice designs using just colors, sometimes you may want the added design options and flexibility that using images can provide.

The following example shows how to apply the background-image property:

body {
  background-image: url(http://www.yoursite.com/yourimageurl);
}

Once a background image has been defined, there are a number of ways that you can modify how that image is displayed.

Background Repeat

The background-repeat property specifies whether the background image will repeatedly display until it fills up the entire area of the element the background is being applied to or if the background image will be displayed only once. You can choose for the background image to repeat along the x axis (horizontally) by defining repeat-x or for the image to repeat along the y access (vertically) by defining repeat-y. If you do not want the background image to repeat, you can define no-repeat. The default setting if you do not define this property is for the image to repeat both horizontally and vertically. Go to the W3C Schools page on background repeat to see how the different options for setting background-repeat can be applied.

Background Attachment

The background-attachment property specifies whether the background image will scroll along with the rest of the elements on the page when the user slides the scroll-bar in the browser or whether the image will stay fixed to the page. The background-attachment property can either be set to scroll or fixed.

Background Position

The background-position property specifies the initial position where the background image will be placed inside of the element it is the background for. You can set both the horizontal and vertical position. Options for setting the horizontal position are left, right and center. Options for setting the vertical position are top, bottom and center. Go to the W3C Schools page on background position to see how the different options for setting background-position can be applied.

Background Size

In CSS 3.0 it is now possible to set the background-size of the image as well. The options for setting background size are length, percentage, cover and contain. This becomes especially helpful when using large size web background images where you want to stretch the image to fill up the entire area of the element. Go to the W3C Schools page on background size to see how the different options for setting background-size can be applied.

Tiled Background Images

A tiled background image is a small size image that is designed so that it can repeat seamlessly both horizontally and vertically. When using a tiled background image, the actual image may only be 75px in size, but when it is repeated both horizontally and vertically it appears to be a single large image that fills the entire area. Below is an example of an image designed to be used as a tiled background.

CC-BY image from webtreats

This image can then be repeated in both the x and y directions to cover a larger area. The background below is made up of the single 100px by 100px image that is shown above.

When creating tiled background images of your own, it is important to make sure that the edges will align seamlessly when tiled. This can be difficult when designing your own tiled backgrounds. The image below looks like it could be used as a tiled background, but when it is repeated, if you look closely you can see the seams between the images.

Original image CC-BY from of webtreats

Here, the image above is used as a tiled background. If you look closely, you'll notice the edges don't align perfectly.

Large Size Background Images

A large size background image is different from a tiled background in that the technique makes use of a single, large size image that is not repeated. Large size background images may either be stretched to fit the entire area of the page or just be used to frame the content area. If the image doesn't take up the entire area of the page, it is important that the edge of the background image blends in with the background color of the page so it appears seamless. Photographs and large graphics can both make excellent large size background images. To see some examples of how large size background images can be used, go to your search engine of preference and enter the query "large web background." Look for some example pages and notice the ways in which the large background images are used.

When using a large size background image, it is important to consider the file size of the image you are using. Be sure to optimize any images that you use and try to keep the overall file size of any image files as low as possible.

It is also important when using a large size background to test how it looks on multiple monitors and at multiple browser window sizes. An image that fills up the entire screen on a 13 inch monitor may not fill up the entire area on a 24 inch monitor. Also, when you are designing, make sure to resize your browser window and test to see if the background image still displays properly in relation to the rest of the elements on the page.

Considerations

When considering whether to use a background image, it is important to think about how it will impact the overall design of the page. Make sure the background image doesn't cause the page to look too busy or distract attention away from the main area of the page where you would like the viewer to focus their attention. In addition, you should be thinking about how a background image affects the performance and accessibility of a site. Images can have large file sizes and particularly when using a large size background image, the overall bandwidth needed to view your page and speed of download should always be a consideration.

Activities

For the activities, you will try applying both a tiled image background and a large image background. After you have tried them both, you can pick the one you like best and use that for your portfolio page.

Part 1: Create a Tiled Background Image

Go online and search for an image that can be used as a tiled web background. Remember what you learned in the earlier lesson on Acquiring Images for Web Graphics. Here are a few good options:
- Flickr Creative Commons has some excellent background images. Enter "web background" into the search field and see what you find. Once you have found an image you like, click on it and then from the "actions" menu select "view all sizes." For a tiled image, you can pick one of the smaller sizes: thumbnail, square or small. Download the image to your computer and make sure to note the license and creator so you can provide proper attribution.
- Use an online background generator. There are several great tools available. For a list see SingleFunction.com's review of 15 Online Background Generators.
- Create your own background image, suitable for tiling. There are many good online tutorials that can help guide you through the process. Just enter "creating tiled background" into the search engine of your choice.
After you have downloaded or created a background image, add it to your portfolio's images folder. Then, in your external CSS file, add the background image to your site by applying the background-image property to the body element. Your CSS should look similar to this example:
```
body {
  background-image: url('../images/tiledimage.gif');
}
```
IMPORTANT! The path to the background image must be relative to the CSS file, not the HTML file.

Part 2: Create a Large Image Background

Follow the same steps as in the proceeding section to download or create a large background image. There is no hard rule about image size, but it should be large enough to scale upwards without too much loss of resolution. However, keep in mind that users have a variety of screen resolutions, so if the image is more than 800 pixels wide some users may only see a portion of the image.
Once you have your large background image ready, save it to your portfolio site's images folder. Then modify the background-image property that you added in the previous section so that it points to the new file. Refresh your page in the browser to see the new background. Depending on the resolution of your monitor, you will likely see the background image repeated, both horizontally and vertically, which may look a little funky. The following additional properties can be used to control how the background image is displayed:
- background-repeat - possible values include repeat-x (repeats horizontally along the x axis), repeat-y (repeats vertically along the y axis), and no-repeat.
- background-size - possible values include cover (image is scaled so that its shorter side fills the entire container), and contain (image is scaled to be as large as possible with the entire image still fitting within the container). Note: This is a CSS3 property, and is not supported by older browsers, particularly Internet Explorer prior to version 9.
Try playing around with various values of each of these properties to see their effect. When finished experimenting, decide on a background (either tiled or large) that you would like to keep on your portfolio site.

Resources/Online Documents

All done?

Proceed to the next module.