Working with Backgrounds

You can apply a background property to any element. Whether it’s a division, a table, a paragraph, a heading—whatever you like—you can add color or graphics to enhance the appearance of that element.

In the CSS2 specifications, background refers to the background of the content and padding areas for the element. This means any property you apply to a background will include the padding as well as the background.

Note

Background properties are not inherited.

Adding a Background Color

To add a background color to any element, use the background-color property. Here’s a perfect opportunity to use color!

There are two values available for this property, <color> and transparent.

A value of <color> is any color value: Hexadecimal, Hex shorthand, RGB, and color names. A value of transparent makes the background of the element transparent so that the color or images behind it can show through.

Note

The transparent value is especially helpful because background properties are not inherited. Also, the background-color property, while not inherited, will show through to children elements in compliant browsers because the transparent value is considered the default for that property.

If you add the following rules to the headings in the earlier document, you’ll see the effect of the background color and how it’s applied to the complete element:

body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
}
h1  {
     font: bold 28px Verdana, Arial, Helvetica, sans-serif;
     color: #663366;
     background-color: #CCC;
}
h2  {
     font: bold 24px Verdana, Arial, Helvetica, sans-serif;
     color: #c9c;
}

Figure 5.10 shows the document with updated changes.

Figure 5.10: Adding a few background colors starts to perk this page up

Inserting a Background Image

Background images are a great way to add color, texture, and visual interest to your designs. Backgrounds for use with CSS are created with many of the same design ideals in mind as those created for use with conventional HTML.

Backgrounds can be wallpaper tiles or watermark style.
File sizes should be kept as small as possible.
Backgrounds should contrast with foreground text colors as much as possible to encourage readability.

Note

While background images can be made to tile to fill the browser window exactly as they do using conventional HTML, CSS does offer more control over backgrounds. Because you can determine whether they should repeat or be fixed, you have more flexibility in how your background images are designed.

Background images can be inserted into any element using the background-image property (or the background property; see the "CSS Shorthand for Backgrounds" section later in this chapter). The image can then be positioned or modified in a variety of ways. The general syntax is as follows:

background-image: url(my_image.gif)

To add a background image that will tile the entire body of your design, follow these steps:

Be sure your background image is placed in the proper directory. For the purposes of this exercise, I placed the image (flower-tile.gif) in the same directory as the sample document (grab the file from the book’s web page for a close-up look as the file is quite small). The image is 40x40 pixels and purposely designed to create a seamless tile design (see Figure 5.11).

Figure 5.11: This small image tiles to fill the canvas, creating a seamless effect.

In the style sheet, add the background-image property to the body selector:

body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
     background-image: url(flower-tile.gif);
}

Save and view your file.

Figure 5.12 shows the results.

Figure 5.12: Adding the background to the document

To see how an image can be applied to a specific element, follow these steps:

Begin by commenting out the background image in the body. This is so you can leave the image in the style sheet, but disable it for the time being:

body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
     /* background-image: url(flower-tile.gif); */
}

In the style sheet, add a paragraph selector and declaration block below the h2 selector entry:

h2  {
     font: bold 24px Verdana, Arial, Helvetica, sans-serif;
     color: #c9c;
}
p  {
}

Add the declaration:

p  {
     background-image: url(flower-tile.gif);
}

Save your file and view in your browser (see Figure 5.13). The tiles will now only be applied to the paragraph elements (5.13A), but any others elements (5.13B) remain unaffected by the rule.

Figure 5.13: Adding a background to only the paragraph elements

Applying suitable mix-and-match backgrounds to different page elements is one area where designers have a terrific opportunity to be innovative and unique using CSS.

Tip

As with HTML, it’s recommended that you include a background color that’s as close to the main color within your background graphic as well as the background graphic in your style sheet. This way, if a background does not load, your site visitor will still see the intended color.

Modifying Background Features

There are several features with which you can manage background graphics to create clever as well as functional design opportunities:

Repeating With the background-repeat property, you can define how a background repeats, or if it repeats at all.

Positioning Using the background-position property and a range of values, you can position your background graphics in context of the element for which they are defined.

Scrolling The background-attachment property allows the background image to scroll with the content (behavior you’re used to with HTML backgrounds) or remain fixed in place while the rest of the document scrolls in front of it.Figure 5.

Note

Fixed background images are placed with respect to the browser window, not the element to which they’re assigned.

Repeating a Background Image

You can define the way a background image will repeat, or not repeat, depending upon your needs.

Using the background-repeat property, you can modify a background’s repetitions using the values described in Table 5.1.

Table 5.1: Values Associated with Background Repetition
Value	Description
repeat	Causes the background to tile as you’d expect if you were using conventional HTML.
repeat-x	Causes the background to be repeated along the left and right of the x-axis.
repeat-y	Causes the background to be repeated up and down along the y-axis.
no-repeat	Suppresses repetition completely. The background will be placed into the element, but no repeating will occur.

To make the background graphic repeat along the x-axis, follow these steps:

In the style sheet, replace any existing background graphic within the body selector as follows:

body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
     background-image: url(background-square.gif); 
}

Add the repeat declaration:

body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
     background-image: url(background-square.gif); 
     background-repeat: repeat-x;
}

Save your file and view the changes in your browser (see Figure 5.14).

Figure 5.14: Repeating a background tile horizontally—notice how the background color appears where the background ceases to tile.

You can now play with the available values to see how they will affect the behavior of the repetition.

To repeat an image along the y-axis, modify the above style sheet within the document as follows:

body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
     background-image: url(background-square.gif); 
     background-repeat: repeat-y;
}

Figure 5.15 shows the results.

Figure 5.15: Repeating the background along the y-axis only

To fix the image so it doesn’t repeat, modify the style using the no-repeat value:

body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
     background-image: url(background-square.gif); 
     background-repeat: no-repeat;
}

View the document in your browser, and you’ll see that the image does not repeat at all. Rather, it is fixed to the upper-left and right of the element for which it is defined, in this case, the body (see Figure 5.16).

Figure 5.16: Here, the background doesn’t repeat

By now, you’ve probably noticed that the way you manage repeating a background image influences its position to a certain degree. You can get even greater control at this point by adding background positioning for the image.

Positioning a Background Image

Positioning determines the point or points within the element in use where the tiling of your image begins.

Table 5.2 shows the values and a description of their results.

Table 5.2: Value Meanings for Background Positioning
Value	Meaning
percentage	You can use one or two percentage values. If you use a single value, that value will place the background in relation to the padding edge of its element for both the x- and y-axes. If you use two percentage values, the first denotes the x-axis location, the second, the y-axis.
length	Defines the relationship of the background image from the top left corner of the element’s padding edge. You can use one length value for both axes. If you use two values, the first is the horizontal (x) axis, and the second is the vertical (y).
top	Causes the top edge of the originating position within the element to be aligned with the top edge of the background graphic. Note that you can combine the keywords top, bottom, left, and right to achieve different effects.
bottom	Causes the bottom edge of the originating position within the element to be aligned with the bottom edge of the background.
left	Causes the left edge of the originating position to be aligned with the left edge of the graphic.
right	Causes the right edge of the originating position to be aligned with the right edge of the graphic.
center	Allows the center of the originating position and the center of the image to be aligned.

Note

You can’t mix keywords and values. For example, “top 50%" is not acceptable, where "0px 50%" is.

Because you’ve made a lot of modifications for the first listing, you’ll start with a new listing to learn about positioning backgrounds, Listing 5.3.

Listing 5.3: WWW. The Sample Document, Cleaned Up for the Following Exercises

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Chapter Five: Positioning Backgrounds</title>
<style>
body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
}
h1  {
     font: 24px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     padding: 35px;
     border: 2px solid;
}
h1.background  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>pristine &amp; clean</h1>
<h1 class="background">background action</h1>
</body>
</html>

Figure 5.17 shows the results.

Figure 5.17: Adding a background to an element

A few things to note:

I’ve added a padding value to the h1 selector of 35 pixels and a border of 2 pixels solid (see "Working with Borders" later in this chapter, for more information on border options).
I’ve added a background class for the h1 selector that includes a background image for the example and a value of no-repeat. This is to show the sample image once so you can see how it is influenced by the various positioning values.

Positioning with Percentages

Using percentages allows you to denote a position on your graphic that you’ll align in relation to the element for that background.

To position your background using one equal percentage value, follow these steps:

In the h1.background rule, add the background-position property:

h1.background  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position:
}

Add the positioning. Set the value as a percentage. Because you’re basing your positioning on equivalent values for both the x- and y-axes, you need only use the one value:
```
h1.background  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: 35%;
}
```
Save your changes and view the results (see Figure 5.18).

The background image has been placed 35 percent along the x-axis (5.18A) of the element box, and 35 percent along the y-axis of the element (5.18B).

Figure 5.18: Positioning a background using a percentage

You may also use two values, as follows:

background-position: 35% 50%;

In this case, the first value relates to the x-axis and the second to the y-axis.

Note

Percentage values may not be mixed with keyword values available when using the background-position property. However, percentage values may be mixed with length values.

Positioning with Length Values

You may prefer to use length values because you can use pixels, precisely positioning your background within its element box.

Length values work a bit differently. Length values describe an offset between the top left corner of the viewing area and the top left corner of the image. Percentages line up the percentage point within the image itself to the same position within the viewing area. For example, if you use a percentage of 50%, the midpoint of the image is aligned to the midpoint of the viewing area.

If only one length is given, that value is applied to the measurement for the x- and y-axes:

h1.background  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: 25px;
}

This markup will cause the background to be neatly positioned 25 pixels along the horizontal axis and 10 pixels along the vertical. If two are given, the first one is for the x-axis, the second value for the y-axis:

h1.background  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: 25px 10px;
}

Figure 5.19 shows the results. Notice the image is still positioned 25 pixels along the horizontal (5.19A) and is 10 pixels along the vertical axis (5.19B).

Note

You can combine length with percentage values. If you want a background image to be 25 pixels along the horizontal and 10 percent along the vertical axis, you would write background-position: 25px 10%; for the declaration. You cannot combine length values with keywords, however.

Figure 5.19: using pixel values to position the background

Positioning with Keywords and Keyword Combinations

As you read at the beginning of this “Positioning a Background Image” section, there are several keyword positioning options available. Keywords can exist by themselves or can be combined into pairs to position the background more effectively within the element box.

Listing 5.4 shows a style sheet that defines and applies a class position for each of the h1 selectors, demonstrating the location of each individual named keyword.

Listing 5.4: WWW. Demonstrating Background Positioning with Keywords

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Chapter Five: Positioning Backgrounds</title>
<style>
body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
}
h1  {
     font: 24px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     padding: 35px;
     border: 2px solid;
}
h1.left  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: left;
}
h1.right  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: right;
}
h1.bottom  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: bottom;
}
h1.center  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: center;
}
</style>
</head>
<body>
<h1>pristine &amp; clean</h1>
<h1 class="left">background-position: left;</h1>
<h1 class="right">background-position: right;</h1>
<h1 class="bottom">background-position: bottom;</h1>
<h1 class="center">background-position: center;</h1>
</body>
</html>

Figure 5.20 shows how the background is positioned using these rules.

Figure 5.20: Positioning backgrounds using keywords

Combining keyword values gets you more options. You can use the following combinations:

top left
top center
top right

center center
right center
bottom left

bottom center
bottom right

Note

You can write these the other way, too. That is, top left can be written left top and it is interpreted the same way. Netscape 6 has a noted bug in this regard; you can read more about it at http://devedge.netscape.com/viewsource/2002/background-position-keyword/ .

In Listing 5.5, I’ve created a new document containing styles that demonstrates these combinations.

Listing 5.5: WWW. Document Describing Paired Keyword Positions

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Chapter Five: Positioning Backgrounds</title>
<style type="text/css">
body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
}
h1  {
     font: 24px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     padding: 35px;
     border: 2px solid;
}
h1.topLeft  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: top left;
}
h1.topRight  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: top right;
}
h1.centerCenter  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: center center;
}
h1.rightCenter  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: right center;
}
h1.bottomLeft  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: bottom left;
}
h1.bottomCenter  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: bottom center;
}
h1.bottomRight  {
     background-image: url(position-test.gif);
     background-repeat: no-repeat;
     background-position: bottom right;
}
</style>
</head>
<body>
<h1>pristine &amp; clean</h1>
<h1 class="topLeft">top left</h1>
<h1 class="topRight">top right</h1>
<h1 class="centerCenter">center center</h1>
<h1 class="rightCenter">right center</h1>
<h1 class="bottomLeft">bottom left</h1>
<h1 class="bottomCenter">bottom center</h1>
<h1 class="bottomRight">bottom right</h1>
</body>
</html>

Figure 5.21 clearly demonstrates the keyword positioning results.

Figure 5.21: Using paired keywords for background positioning

It’s important to note that keyword and keyword pairs relate directly to specific percentage values. Table 5.3 shows how this works and illustrates how both keywords and percentages relate the background to the x- and y-axes of the element block.

Table 5.3: Keywords and Related Percentage Values in Background Positioning
Keyword/Keyword Pair	Percentage Value
top left	0% 0%
top, top center	50% 0%
right top	100% 0%
left, left center	0% 50%
center, center center	50% 50%
right, right center	100% 50%
bottom left	0% 100%
bottom, bottom center	50% 100%
bottom right	100% 100%

Modifying Scroll

With the background-attachment property you can control whether your background scrolls or is fixed. Scrolling backgrounds mimic the behavior you’re used to seeing on HTML pages using a background defined with the background attribute in the body tag. In HTML, there’s no way to modify the scrolling of backgrounds. In CSS, however, you can do so to provide some unique visual effects.

There are two values for the background-attachment property:

scroll
fixed

These are pretty self-explanatory, but here’s an example of each to clearly differentiate the behavior.

Listing 5.6 describes a simple page with a background image set to scroll.

Listing 5.6: WWW. Creating a Background Scroll

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Chapter Five: Positioning Backgrounds</title>
<style type="text/css">
body  {
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     margin: 20px;
     color: black;
     background-color: #FFFFCC;
     background-image: url(background-square.gif);
     background-attachment: scroll;
}
</style>
</head>
<body>

<p>Look well into thyself; there is a source of strength which will always spring up if thou wilt always look there.</p>
<p><em>Marcus Aurelius</em></p>

</body>
</html>

Now, you’ll have to fill the page up with enough text so that it does create a vertical scroll. I’ve used a placeholder quote here to avoid additional pages of just text within the listing, but you can copy and paste any amount of text into this document to test the scrolling. What you’ll see is that the background image scrolls along with the text; they are attached to one another and act in a dependent way.

To set the contents of the document to scroll over the background while the background remains in a fixed position, replace the scroll value with fixed:

background-attachment: fixed;

Save the document and view it again in a web browser. Now you’ll see the content move over the fixed background.

Note

Browser support is a bit odd for the background-attachment property. While most browsers support the property itself, the majority of available browsers properly support fixed backgrounds only when used with the body element, despite the fact that the CSS2 specification does express that the property should apply to all elements.

CSS Shorthand for Backgrounds

As with quite a few of the properties you’ve explored in this book, you can write rules for backgrounds using shorthand.

The shorthand property for backgrounds is background. All of the properties and values discussed in this section relate to this property, but of course you only need to define the properties you need to achieve your desired results.

You can set only the background color with a background:

p  {
     background: yellow;
}

A background with a color and an image:

p  {
     background: yellow url(floral-tile.gif);
}

A background with a color, an image, positioning, repeat, and scroll values:

p  {
     background: yellow url(floral-tile.gif) left bottom repeat-y scroll;
}

As always, shorthand properties make for more concise and manageable style sheets. However, using shorthand is an entirely personal choice, and you can mix both longhand and shorthand forms within a style sheet without any problems.

Tip Since both longhand and shorthand forms are acceptable, when you’re working in a larger organization it can be in your best interest to have a style guide describing how authors should write their rules.