Adding an Image to the Page Background

CSS TUTORIAL 8 – USING BACKGROUND IMAGES

The CSS background-image property is the 'secret weapon' of modern web design. Since you can use it to add an image to the background of any HTML tag, the designs you can create are limited only by your imagination. The drop shadow example in the previous exercise is just one example of creative background image use. Other common background image uses include applying a page background and adding custom bullets to unordered lists. We will explore some of these common tasks in this exercise.

Adding an Image to the Page Background

Whether it is an intricate pattern, a logo or a full-screen photograph, images appear in the background of many web pages. I n fact, adding an image to the background of a page is probably the most common application of the background-image property.

In your HTML editor, open the file bg_ex/sidebar.html.

This page has a floated sidebar and uses background colours to highlight portions of the page.

To start, you will add a <div> tag to create a container for the page's content. You will create a design that is a set width and is centred in the middle of the browser window.

Locate the opening <body> tag and, directly below it, add the following tag:

<body>

<div id="wrapper">

This opening <div> tag marks the beginning of the container. You need to add a closing </div> tag next.

Near the bottom of the file, locate the closing </body> tag. Add this </div> tag directly above it:

</div>

</body>

You have wrapped all of the page's content in a single container. Now you will add a style defining a width for the container and centering it in the browser window. This file already has an internal style sheet that provides some basic formatting. You will add this new style to that style sheet.

Insert the following style between the body and h1 tag styles:

#wrapper {

width: 760px;

margin: 15px auto 0 auto;

text-align: left;

}

This ID style defines how the <div> you just inserted should look. The 760 pixel width means the entire width should fit inside monitors that have a resolution of at least 800 x 600 pixels. The margin property uses the keyword auto for both the left and right margins, which tells a web browser to split the difference between either side of the container - effectively centering the container inside the browser window.

If the browser window of the visitor viewing this page is 900 pixels wide, then there will be 70 pixels of space on both the left and right sides. (900-760=140; 140 divided by the two sides equals 70 pixels on either side).

The last style declaration text-align: left simply aligns all text to the left edge. Left alignment is how text usually appears, but in this case, you are using the declaration to help solve a problem in IE 5.

Now, you will add an image to the page's background.

Locate the body tag style. Add the following three lines of CSS to it:

background-image: url(images/page_bg.jpg);

background-repeat: repeat-x;

background-position: left top;

The first line of code points to the image page_bg.jpg that you want to display on the page. This graphic is a gradient that starts as a vibrant green at the top and fades to white at the bottom. The graphic is not as tall as the page content so without further instructions it would tile over and over across and down the page. At a certain point down the page, that vibrant green would reappear and fade once again downward to white.

To prevent this you have set the background-repeat property so that the image tiles from left to right in order to fit any width of browser window but does not tile down the page. The last line positions the image to start at the top left edge of the page.

Note: Using background property shorthand, you can condense the three lines of code from above (and the background-color property already defined in the body style) into a single line of CSS:

background: white url(images/page_bg.jpg) left top repeat-x.

Finally, complete this style by fixing an IE 5 bug. That browser does not understand the auto margins you set earlier, so it will not centre the container <div>. You need to add one more property to the style for IE 5's benefit.

Edit the body style by adding the text-align CSS property. The completed style should look like this:

body {

font-family: Tahoma, "Lucida Grande", Arial, sans-serif;

font-size: 62.5%;

margin: 0;

padding: 0;

background-color: white;

background-repeat: repeat-x;

background-position: left top;

text-align: center;

}

Note: Centering the text on the page using the text-align property forces Internet Explorer 5 to centre the container <div>. IE 6 and 7 do not need this extra help since those browsers understand the auto value used for the left and right margins. However, all of the text inside the <div> would be aligned in the centre as well. Fortunately, you fixed that problem earlier when you set the text-align to left - restoring normal alignment to the text inside the <div>.

Save the file and preview it in a web browser.

The background graphic's bright green gradient flows down the page. Unfortunately, the graphic is also in the text's background - making some parts difficult to read. You will take care of that by adding a background colour and graphic to the <div> tag.

Return to your HTML editor and the sidebar.html file. Edit the #wrapper style like so:

#wrapper {

width: 760px;

margin: 15px auto 0 auto;

background: #FFF url(images/wrapper_bg.gif) center top no-repeat;

text-align: left;

}

This background property shorthand sets the background of the <div> to white, adds an image named wrapper_bg.gif to the background, centres that graphic at the top of the <div> and sets it to display only once.

If you preview the page now, you will see the area where the text sits is white. You will also notice reddish lines on either side of the <div> that fade at the bottom. The effect is subtle, but noticeable.

Replacing Borders with Graphics

The border property is a useful tool in CSS design, but the limited number of border styles CSS offers can get boring. A hand-drawn line with the texture of charcoal on rough paper would catch your visitors' attention better than a plain, straight one. You can skip the border property and add any kind of line you want as a background image.

In this exercise, you will replace the underline below each <h2> tag with a custom graphic that looks like a hand-drawn line.

Return to your HTML editor and the sidebar.html file. Locate the h2 tag style, remove the border-bottom property, and then add two background properties so that the style looks like this:

h2 {

font-size: 1.8em;

color: #7BA505;

margin: 10px 5px 0 25px;

overflow: hidden;

background-repeat: repeat-x;

}

The background-image property specifies which graphic to use in the background of every <h2> tag on the page, while the repeat-x value makes sure that the graphic online tiles horizontally. In other words, no matter how long the <h2> tag is, the graphic repeats - giving the illusion of one solid line.

If you preview the file now, you will see that the underline does not exactly line up. In fact, it is not under at all. It is above the headings!

Add the following style declaration to the h2 style below the background-repeat property:

background-position: left bottom;

You have changed the graphic's starting location so it appears at the left edge and bottom of the <h2> tags. If you preview the page now, though, you may not notice much improvement. The underline runs into the heading text.

But there is an easy fix. Since the bottom value used here puts the graphic at the bottom of the block created by the <h2> tag, you need only to increase the overall height of the block to move the line down a bit. You will do this with a little bottom padding.

Edit the h2 style one last time, so that it looks like this:

h2 {

font-size: 1.8em;

color: #7BA505;

margin: 10px 5px 0 25px;

overflow: hidden;

images/underline.gif);

background-repeat: repeat-x;

background-position: left bottom;

padding-bottom: 7px;

}

Padding is the space between the border and the content. It also increases the overall height of the box - in this case by adding seven pixels of bottom padding. Now, the line graphic is placed at the bottom of the h2 block, but in the empty space created by the bottom padding.

Save the file and preview the page in a web browser.

Each <h2> tag has the hand-drawn underline. Next you will tackle the sidebar box, making it look a little less boxy and improving the look of the bulleted lists.

Using Graphics for Bulleted Lists

The average bullet used for unordered lists is a black dot - not very inspiring. But you can use the background-image property to replace those drab bullets with any image you want. The first step's to hide the bullets that normally appear beside list items.

Return to your HTML editor and the sidebar.html page. Locate the .sidebar li style near the end of the internal style sheet.

This descendent selector targets any <li> tag that appears inside another tag with a class of sidebar.

Replace the two CSS properties in the .sidebar li style with list-style: none;

The style should now look like this:

.sidebar li {

list-style: none;

}

Note: You can just as well apply list-style: none; to a style affecting the <ul> or <ol> tags to remove bullets from each list item.

This removes the bullet. Now add the graphic.

Add the following two properties to the .sidebar li style:

background-repeat: no-repeat;

You have seen these two properties before. They add an image to the background and turn off repeating so that the graphic appears only once.

If you preview the page, you will see that the bullets currently overlap the list text and the list items are a little jammed together. A little padding and margin will fix this.

Add two more properties to the .sidebar li style:

padding-left: 18px;

margin-bottom: 6px;

The left padding adds empty space, effectively moving the text out of the way in order to display the new bullet icon. The bottom margin adds just a bit of breathing room between each list item.

There is just one final flaw. The bullet image is a little too high on the line, causing the tip of the icon to stick out too far above the text. You can easily fix that with the background-position property.

Finish this style by adding background-position: 0px 2px;

The completed style should look like this:

.sidebar li {

list-style: none;

background-repeat: no-repeat;

background-position: 0px 2px;

padding-left: 18px;

margin-bottom: 6px;

}

This last style declaration positions the bullet icon to the far left, two pixels from the top of the list item. It moves the icon down just a little, enough to make the bullet look perfect.

Note: This kind of exact positioning is precisely why you should use the background property instead of the list-style-image property for adding graphic bullets to your lists.

Save the file and preview the page in your browser.

The list should now have fanciful flower icons instead of dreary black circles.

Adding Rounded Corners to the Sidebar

At this point, the sidebar, like much of the page, is rather boxy. To add visual variety, soften the sidebar's appearance with some rounded corners.

In a nutshell, you will first add a background image with rounded corners to the bottom of the sidebar. Then, for the rounded corners at the top of the box, you will add a background image to the first tag in the sidebar (the <h3> tag).

Return to your HTML editor and the sidebar.html file that you have been working on.

The graphic that you will place in the bottom of the sidebar has a decorative photo and two rounded lower corners.

Locate the .sidebar style in the file's internal style sheet. Replace the background color declaration background-color: #CBF622; with this:

background: #CBF622 url(images/bg_bottom.gif) center bottom no-repeat;

This shorthand property includes the same background colour you just replaced plus instructions for adding a graphic to the centre and bottom of the sidebar.

Preview the page now and you will see the graphic - but a few things are not quite right. There is space on both the left and right side of the image, so it does not look like it is actually the bottom of the sidebar it just looks like a photo inside the sidebar. Also, you can not read all of the text since some of it overlaps the image. Finally, the border around the sidebar appears outside of the graphic, making the sidebar appear to still have a square bottom. You will tackle these problems one by one.

In the .sidebar style, remove the following property declaration: padding: 10px;

The graphic is 220 pixels wide, and the width of the sidebar is also set to 220 pixels. However, the 10 pixels of padding adds 10 pixels of space around the sidebar, and 20 pixels (left and right) to the overall width of the sidebar. Removing the padding property makes the sidebar reduce its width to the width of the graphic.

Note: The rounded corners technique used here is for a fixed-width box. That means if you change the width of the sidebar, you will need to recreate the graphics at the same width to match.

To add some room at the bottom of the sidebar so that the picture does not interfere with the text, add the style declaration padding-bottom: 75px; to the .sidebar style.

Padding is the space between the borders of an element and the content. By adding 75 pixels of bottom padding you ensure that there is plenty of room for the background image so that text can never overlap it.

There is one final problem to fix. The border around the sidebar appears around the background graphic. Simply removing the border does the trick.

Remove the border property from .sidebar so that the final version of the style looks like this:

.sidebar {

width: 220px;

float: right;

margin: 10px;

background: #CBF622 url(images/bg_bottom.gif) center bottom no-repeat;

padding-bottom: 75px;

}

Save the file and preview it in a web browser.

Notice that even though you eliminated the border, there is still a borderline around the bottom, curved corners and sides of the base of the sidebar. That line is not created with CSS. It is just a line drawn directly on the graphic. You will next insert a graphic to make the top of the sidebar box rounded as well.

It would be ideal if you could add a background image to the top of the sidebar and a different background image to the bottom of the sidebar. This way you would have rounded corners on both the top and bottom, but the sidebar itself could expand to fit whatever content was added to it.

Unfortunately, CSS 2.1 lets you add only one background image per style. You must find something else to "attach" the second background image to - like a tag somewhere in the sidebar. In this case, since the image adds rounded corners to the top of the sidebar box, you can apply the style to the first tag inside the sidebar. You will use a descendent selector to do that.

Note: Future versions of CSS will allow multiple background images for a single style.

Locate the .sidebar h3 style in the external style sheet. Then add the following line of code to the style:

background: url(images/top_bg.gif) center top no-repeat;

By now, this kind of shortcut style should look familiar. It adds a graphic to the top and centre of the style. In this case, it will appear in the background of the <h3> tag inside the sidebar. At this point, the rounded corners are in place, and the box is a little less boxy. You will just add a few final touches to the heading by making the text white so it stands out from the newly added graphic and adding a little padding above and below the heading so it is not so cramped.