For many years, web sites all over the world generously offered free tiled background patterns to budding young web designers as a way of “enhancing” their web pages. Derided by many designers in the field as tacky, these backgrounds were generally used sparingly, if at all, by professional designers, especially where download speed was of major concern—and in those heady days of 14.4kbps modems, download speed was always of major concern.

How times have changed in the past ten or so years! With the advent of CSS and the increased proliferation of broadband, backgrounds have become an integral part of web design and development. Backgrounds are no longer simple repeated patterns or, in more abstract cases, extremely large photographs. Nowadays, they form the basis of many a well-designed site. From CSS rollovers and “Faux Column” layouts, to form styling and fluid layouts, backgrounds have become an integral part of the developer’s toolkit.

In this article, we’ll first of all deal with the theory behind the, um, background, in which we’ll break down the properties of backgrounds. Armed with this theory, we’ll proceed to walk through a case study together, in order to see some of the techniques that are utilized by developers faced with a challenging and daunting site design. Finally, we’ll predict the advent of CSS 3, speculating as to what may be in store for designers in the near future.

Before we begin our case study, we’ll need to be equipped with an understanding of the basics of creating backgrounds. For the sake of keeping this instruction brief and concise, let’s just look at the shorthand notation of the background property to start with. It looks like this:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

That’s your background, right there. But to the uninitiated, this code probably doesn’t make a whole lot of sense. Let’s break it down into its individual properties—backgroundcolor, background-image, background-repeat, background-attachment, and backgroundposition.

Setting background-color
Let’s take a look at the specification of the background-color property:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

This property can take as its value a hexadecimal number, an RGB color name value, for example, rgb(255,0,0) for red, a name value, or a transparent keyword.

Hexadecimal values use the fewest characters, and are the most common method of defining colors in CSS. So, for simplicity, we’ll use hexadecimal values.

Setting background-image
The background-image property is also very straightforward:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

This property gives us most of our design flexibility. The location of the image should be specified relative to your CSS file. For example, if you keep your images in a subdirectory of the folder containing your CSS files, and this subdirectory is called images, you’d need to edit the location of the image like so:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

Simple!

Setting background-repeat
Here’s the background-repeat property:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

The valid values for the background-repeat property are:

• no-repeat
  As its name suggests, the no-repeat value causes the background-image to be rendered once, at the point determined by the background-position property.
• repeat-x
  repeat-x forces the background image to repeat horizontally, left-to-right.
• repeat-y
  Setting background-repeat to repeat-y results in the image being repeated along the Y axis, starting at the top of the element.
• repeat
  The default value for background-repeat, repeat causes the background-image to be tiled across the entire area of the element, starting from the top left.

Setting background-attachment
Let’s investigate the background-attachment property:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

The only valid values for this property are:

• fixed
• scroll, the default value

The background-attachment property defines whether the background-position is calculated relative to the page content (scroll), or relative to the browser viewport (fixed). The most notable difference between these values is that background-attachment: fixed; will cause the background-image to remain stationary if the user scrolls the page.

For the purposes of this article, we’ll ignore the background-attachment property, and it’ll therefore assume the default value. We’ll gloss over the background-attachment property, due to the lack of support for the fixed value in Internet Explorer 6, which still holds a large share of the browser market despite the release of IE 7. IE 6 only supports backgroundattachment: fixed; on the body element.

Setting background-position
Here’s the background-position property:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

The background-position property defines the starting X and Y coordinates of the background image. Keywords (left/right/center/top/bottom), relative (percentage) values, or absolute values (px/em/pt/mm) are valid options for setting the background-position.

The horizontal keywords that determine the X position of the background image are:

• left, the default
  
• center
  
• right

The vertical keywords which determine the Y position are:

• top, the default
  
• center
  
• bottom