HTML Dog
Skip to navigation

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:

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.