Background Images

Used in a very different way to the img HTML element, CSS background images are a powerful way to add detailed presentation to a page.

To jump in at the deep end, the shorthand property background can deal with all of the basic background image manipulation aspects.


body {
    background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

This amalgamates these properties:

background-color, which we have come across before.
background-image, which is the location of the image itself.
background-repeat, which is how the image repeats itself. Its value can be:
- repeat, the equivalent of a “tile” effect across the whole background,
- repeat-y, repeating on the y-axis, above and below,
- repeat-x (repeating on the x-axis, side-by-side), or
- no-repeat (which shows just one instance of the image).
background-position, which can be top, center, bottom, left, right, a length, or a percentage, or any sensible combination, such as top right.

A top-right positioned, non-repeating background.

It can actually be used to specify a few other background features too, notably attachment, clip, origin, and size (see the background property reference for the nitty-gritty), but let’s not get carried away just yet — color, image, repeat, and position are by far the most fundamental aspects that you would want to manipulate most often.