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( 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.