A Digression on Backgrounds

A Digression on Backgrounds

Before you learn to create the effect of full-height columns in your CSS-based layouts, you'll need to understand backgrounds. There's actually quite a lot to know about them, but at this point, I'm going to stick with the key information you need to use CSS (rather than XHTML) to add a background graphic into a div and to make that graphic repeat to fill the entire div. This is the method you'll use to create the illusion of columns for the viewer.

The Two Ways to Add Graphics From a design point of view, it's interesting to consider whether it's best to add graphics into the background of a div using CSS or directly into the div as content using XHTML markup. For example, if you are adding a bio of the CEO to a corporate Web site, then the CEO's picture is definitely part of the content and should be added into the markup with an img tag. On the other hand, if the graphic is a texture you want to add behind the page for visual interest, then that is presentational and you shouldn't add it to the markup; instead, add it as a background element using CSS. As an extension of this thinking, it's good practice to store content graphics and presentational graphics in separate folders. If you decide to redesign the site using the same content, you have the XHTML and content images entirely separate from the CSS and presentational images, so it's easy to ditch the old presentation and keep the content. This organization is also helpful if you ever syndicate content from your sitesyndicators just want your content, which they use in the context of their own presentation, and if your site is organized in this way, then it is easy for you to separate its content from its presentational elements. The bottom line? Add presentational graphics as backgrounds using CSS.

Background Basics

Although several properties are associated with backgrounds, you only need to look at two of them right now: background-image and background-repeat.

The background-image property has only one valuethe URL of the image. The syntax works like this

background-image:url(my_image_path/my_image.jpg)

Let's use this property to add an image into the background of a div

body {margin:0px; padding:0px; font: 1.0em verdana, arial, sans-serif;}
div#maindiv {border: 3px solid #F33; padding:25px;
background-image:url(images_pres/lucy_blur_v_small.jpg);}
div#maindiv p {color:#FFF; font-weight:bold;}

You'll get the result shown in Figure 6.1.

If the background image is smaller than its container, by default, it fills the container by repeating, or tiling, both horizontally and vertically. You can control the repeating effect using the background-repeat property.

To have the image only appear once, deactivate tiling by setting the background-repeat property to no-repeat, like this

[View full width]
div#maindiv {border: 3px solid #F33; padding:25px; background-color:#666; background-image
:url(images_pres/lucy_blur_v_small.jpg); background-repeat:no-repeat;}

Now your page should look like Figure 6.2.

Now the image appears only oncethis is known as the origin image. If tiling is active, all subsequent images emanate from this one. (The default origin image position is top-left, but you can change that with the background-position property; see Appendix A).

If you set background-repeat to repeat-x, then the image only repeats horizontally, along the x-axis (Figure 6.3).

If you set background-repeat to repeat-y then the image only repeats vertically, along the y-axis (Figure 6.4).

What is wonderful about background images is that they add a great sense of depth to your designs and open up a whole world of creative possibilities. That said, it's important to be aware that you need to carefully choose background images so that they don't interfere with the readability of the type that overlays them. Sometimes lowering the contrast of a background image and then lightening it can help reduce readability problems.