The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 3 - CSS and Images

How do I make a background image that stays still while the text moves when the page is scrolled?

You may have seen sites where the background image remains static while the content scrolls over it. This effect is achieved using CSS.

Solution

Example 3.5. backgroundfixed.html (excerpt)

body {  
 background-color: #FFFFFF;  
 background-image: url(peppers_bg.jpg);  
 background-repeat: no-repeat;  
 background-position: 20px 20px;  
 background-attachment: fixed;  
}

Figure 3.8. The background image is fixed and doesn't scroll off the page with the content.

We can use the property background-attachment with a value of fixed to fix the background so that it doesn't move with the content, as shown in Figure 3.8.

Discussion

In this solution, we're using several CSS properties to add our image to the background, position it, and detail how it behaves when the document is scrolled. It is also possible to use a shorthand method to write out this information, applying the CSS property, background. This property allows you to declare background-color, background-image, background-repeat, background-attachment and background-position in a single property declaration.

Take, for example, the CSS declarations shown below:

Example 3.6. backgroundfixed.css (excerpt)

body {  
 background-color: #FFFFFF;  
 background-image: url(peppers_bg.jpg);  
 background-repeat: no-repeat;  
 background-attachment: fixed;  
 background-position: 20px 20px;  
}

These could also be written as follows:

body {  
 background: #ffffff url(peppers_bg.jpg) no-repeat fixed 20px  
   20px;  
}

How do I set background images for other elements?

In this chapter, we've already looked at setting background images for the document. However, background images can be used on other elements, too.

Solution

Example 3.7. backgrounds2.css (excerpt)

#smallbox {  
 background-image: url(mini_chilli.jpg);  
 background-repeat: repeat-y;  
 float: left;  
 padding-left: 60px;  
 margin-right: 20px;  
 width: 220px;  
 border: 1px solid #F5C9C9;  
}

The red chillies appearing down the left-hand side of the box in Figure 3.9 comprise a background that's created by tiling the background image on the y-axis. The background image shown here is applied to a <div>, along with other rules, to create the box.

Figure 3.9. The chilli image is a tiled background image.

Discussion

Background images can be used on any page element. You can apply a background to a heading, as shown in Figure 3.10:

Example 3.8. backgrounds2.html (excerpt)

<h1 class="header">Chinese style stuffed peppers</h1>

Example 3.9. backgrounds2.css (excerpt)

.header {  
 background-image: url(dotty.gif);  
 width: 400px;  
 height: 30px;  
 padding: 6px 6px 4px 8px;  
 color: #B22222;  
 background-color: transparent;  
}

Figure 3.10. The heading has a background image.

You can even apply a background to links, which can assist you in making some interesting effects, as in Figure 3.11.

Example 3.10. backgrounds2.css (excerpt)

a:link, a:visited {  
 color: #B22222;  
 background-color: transparent;  
 font-weight: bold;  
}  
a:hover {  
 background-image: url(dotty.gif);  
 text-decoration: none;  
}

Figure 3.11. A background image is applied to the link on hover.

How do I place text on top of an image?

In the bad old pre-CSS days, the only way to add text to an image was to add the text in your graphics program! CSS provides far better means to achieve this effect.

Solution

The easiest way to layer text on top of an image is to make the image a background image. The chilli image beneath the list of ingredients shown in Figure 3.12 is added using the following properties:

Example 3.11. backgrounds3.css (excerpt)

 background-image: url(chilli2.jpg);  
 background-repeat: no-repeat;

Figure 3.12. The chilli image is a background image.

Discussion

Using CSS to lay text over images has many advantages over the process of simply adding the text to the image in a graphics program.

First, it's more difficult to change text that is part of a graphic. To do so, you need to find the original graphic, edit it in a graphics program, and upload it every time you need to change the text.

Second, text is far more accessible as text content than as part of an image. Browsers that don't support images will still be able to read text that has been added as CSS. This also benefits your search engine ranking—search engines can't index text that's part of an image, but will see text laid over an image as regular text, and index it accordingly.

How do I add more than one background image to my document?

It isn't possible to add more than one background image to your document. However, it is possible to give the effect of multiple background images by applying a background to elements that are nested, such as the <html> tag and the <body> tag.

Example 3.12. backgrounds4.css (excerpt)

html {  
 background-image: url(mini_chilli.jpg);  
 background-repeat: repeat-y;  
 background-position: 2px 2px;  
 background-attachment: fixed;  
}  
body {  
 background-image: url(peppers_bg.jpg);  
 background-repeat: no-repeat;  
 background-position: 80px 20px;  
}

This effect can be seen in Figure 3.13.

Figure 3.13. Background images are applied to the <html> and <body> elements.

Discussion

This simple example can form the basis of more complex effects using multiple background images. As you've seen through the examples in this chapter, a background image can be applied to any element on the page. The careful and creative use of images in this way can create many interesting visual effects while maintaining the accessibility of the document (as the background images will not interfere with the document's structure).

Many of the entries in the CSS Zen garden rely on such careful use of background images to achieve their layouts.

Summary

This chapter has explained the answers to some common image-related questions. There are, of course, going to be image-related questions all through this book. In particular, the chapters that deal with positioning will explore the positioning of images along with other elements on the page.

Watch out for the next -- and final! -- chapter of The CSS Anthology: 101 Essential Tips, Tricks & Hacks -- it'll be on SitePoint soon. Or, if you can't wait, download the fist 4 chapters free now.