CSS Background Property Syntax

by agrace 19. August 2007 06:18

One of the trickier forms of CSS syntax is that of background properties, especially when using the shorthand form. This post will focus on the background-image property. When used correctly, the background-image property will enable you to create visually superior websites. Many of today's top Web 2.0 sites use this property, often combined with a repeating gradient image that blends into a background color.

First, an overview of the complete set of background properties and some brief descriptions:

Property Description
background Shorthand to set all background properties
background-attachment Sets background image as fixed or scrolled
background-color Sets background color of element
background-image Sets an image as the background
background-position Sets starting position of background image
background-repeat Sets how background image is repeated


For a more detailed breakdown, please see the W3Schools website.

The background properties can be brought together into a single line of shorthand CSS. We do not need to specify all the property values; we can use any one or more of them as follows:

Values [background-attachment] || [background-color] || [background-image] || [background-position] || [background-repeat]


If you have two values for the background-position property, they must appear together. And if we use length or percentage values, they must appear as horizontal first and vertical second. As long as you have at least one value present, you can omit all the rest. Other than that, there isn't any restriction on the order or particular properties to be included. If you omit any property values, then their default values are applied automatically. So, the following two declarations render the same output:

body { background: white url(test.gif); }
body { background: white url(test.gif) top left repeat scroll; }


The page you are looking at had its left navigation and main content area colors set by using a single 780 X 5 pixel, vertically-repeating image. The following CSS was employed:

background: url(img/main.gif) repeat-y;


This shorthand syntax is faster to type and easier to use than the full version. Using background images is an incredibly powerful way to take control of the overall look of your website.