Web Design with HTML and CSS

Working with CSS background images

Lesson 8, Advanced CSS Layout 179

The many wonders of the background image

You can fi nd CSS background images everywhere in web design, so you need to understand
how they work. Following are some of the properties associated with background images.

To tile an image horizontally within the parent container, use the following value:

background-repeat:repeat-x;

To tile an image vertically only, use this value:

background-repeat:repeat-y;

To add a single instance of the graphic (in other words, with no tiling), use this value:

background-repeat:no-repeat;

Background-position

Another useful property is background-position. The default position for background images is

the top-left corner of the containing element, as shown in the following fi gure:

A background image with the “no-repeat” value.

You can position this image in the bottom-right corner by adding this property:

background-position:right bottom;

You can use the keywords left, right, and center to position an image horizontally; by combining

it with the keywords top, bottom, and center, you can also position the image vertically.

You can position background images even more precisely by using either unit or percentage

values. The most common unit values are pixels, but you can also use other units, such as ems.

When using unit values, the fi rst value is the horizontal position and the second value is the

vertical position, as the following example shows:

background-position:10px 40px;

The background image is positioned 10 pixels horizontally and 40 pixels vertically from the top-

left corner of the box (the box itself is 100 pixels high by 300 pixels wide).

(continues)