Developer

How do I... Use CSS to manipulate a background image?

CSS allows you to use background graphics in a wide number of tasteful and versatile ways. Not only can graphics exist as backgrounds to entire pages, but you can also employ CSS to assign a background image to any CSS rule. John Lee shows you just three of many popular ways that Web designers use background images to create dynamic and visually rich pages.

Cascading Style Sheets (CSS) allows you to use background graphics in a wide number of tasteful and versatile ways. Not only can graphics exist as backgrounds to entire pages, but you can also employ CSS to assign a background image to any CSS rule. Here are just three of many popular ways that Web designers use background images to create dynamic and visually rich pages.

Way back in the days of Compuserve, background graphics on Web pages were of limited use. Browsers allowed them to be displayed only as a background to an entire HTML document and by default they tiled into infinity, filling the user's screen to match the width and height of the client computer's browser. An interesting feature, but not one that was exactly welcomed with open arms as the World Wide Web made the transition from hobbyist obscurity to corporate mass communication tool.

Thanks to CSS, though, those days are long gone.

This blog post is also available in PDF form as a TechRepublic download, which includes the example graphics and HTML code.

Gradients

To begin, download the four images below (Figure A) to your hard drive. WARNING: Be sure that they are saved in the same directory that the Web page you are about to build will be saved in, or you will not be able to see the graphics as you build and preview your HTML code.

Figure A

Save these four images into the same directory you will save your HTML page i. (NOTE: The separate images are available in the download version.)
Open your preferred HTML editor and create a new page. Copy and paste the code shown in Listing A into the document and then save it in the same directory as the downloaded graphics from above. It's important to note that you must include the <h1>, <p>, and <a> tags as formatted below, because we will be using CSS to style them with background graphics.

Listing A

<html><head>

<title>CSS Backgrounds</title>

</head>

<body>

<h1>Chapter One</h1>

<p>"Now Beowulf bode in the burg of the Scyldings,

leader beloved, and long he ruled

in fame with all folk..."</p>

<br>

<a href="#">This link will open a new window.</a>

</body>

</html>
Web pages with background gradients are very popular, so we'll build that first. Before CSS, all you could do with a background graphic is define it in the HTML document and it would tile endlessly on both the X and Y axis. Now we have a little more control. Create a new CSS rule for the body by entering the code highlighted in Listing B to define the gradient you downloaded as the background for the page:

Listing B

<html><head>

<title>CSS Backgrounds</title>

<style type="text/css"> <!-- body { background-image: url(gradient.jpg); } --> </style>

</head>

<body>

<h1>Chapter One</h1>

<p>"Now Beowulf bode in the burg of the Scyldings,

leader beloved, and long he ruled

in fame with all folk..."</p>

<br>

<a href="#">This link will open a new window.</a>

</body>

</html>
Save the HTML document and then preview it in your browser. If you expand the browser window to fill your screen, you'll see that the background gradient tiles left to right and top to bottom, which doesn't exactly give us a seamless gradient for a background. Modify the body rule with the code highlighted in Listing C, which will give the page a background color similar to the ending blue of the gradient and tell the background graphic to tile on only the x axis.

Listing C

<html>

<head>

<title>CSS Backgrounds</title>
<style type="text/css">

<!--

body {

background-image: url(gradient.jpg);

background-color: #8393ca; background-repeat: repeat-x;

}

-->

</style>

</head>
<body>
<h1>Chapter One</h1>
<p>"Now Beowulf bode in the burg of the Scyldings,

leader beloved, and long he ruled

in fame with all folk..."</p>
<br>
<a href="#">This link will open a new window.</a>
</body>
</html>

If you preview the HTML document in the browser, you'll see that the background of the page is now a seamless gradient that remains an uninterrupted blue as you go farther down the page.

Content boxes

Here's another Web design element that is very popular right now: Content boxes with rounded corners. Rather than using a kludgey table setup, a quick and easy way to create this look is with background images. You've already downloaded the images boxtop.gif and boxbottom.gif, so the next step is to use a CSS rule to attach the box elements to the proper tags.

Let's begin by declaring the rule "box" as a class (Listing D) by placing a dot in front of it and then coding the background attributes as shown below.

Listing D

<html><head>

<title>CSS Backgrounds</title>

<style type="text/css">

<!--

body {

background-color: #8393ca;

background-image: url(gradient.jpg);

background-repeat: repeat-x;

}

.box { width: 350px; background-color: #ffcc00; background-image: url(boxbottom.gif); background-repeat: no-repeat; background-position: left bottom; } -->

</style>

</head>

<body>

<h1>Chapter One</h1>

<p>"Now Beowulf bode in the burg of the Scyldings,

leader beloved, and long he ruled

in fame with all folk..."</p>

<br>

<a href="#">This link will open a new window.</a>

</body>

</html>

The width attribute of the box rule is set to match the width of the bottom and top rounded corner graphics, thereby ensuring that the content of the box doesn't extend farther than the background graphics. The background color code also matches the color of the background graphics, as with the gradient background in the body tag. The last two attributes, repeat and position, tell the browser not to repeat the background graphic on either the x or y axes and to anchor it at the left-bottom corner of the content.

That takes care of the bottom rounded corners of the box, but what about the top corners? Let's attach that to the <h1> tag that appears within the box rule.

Since we declared the box rule as a class, we can use the code below to state that all <h1> tags that fall inside a box rule have the background image attributes, as shown in Listing E.

Listing E

<html><head>

<title>CSS Backgrounds</title>

<style type="text/css">

<!--

body {

background-color: #8393ca;

background-image: url(gradient.jpg);

background-repeat: repeat-x;

}

.box {

width: 350px;

background-color: #ffcc00;

background-image: url(boxbottom.gif);

background-repeat: no-repeat;

background-position: left bottom;

}

.box h1 { background-image: url(boxtop.gif); background-repeat: no-repeat; background-position: left top; }

-->

</style>

</head>

<body>

<h1>Chapter One</h1>

<p>"Now Beowulf bode in the burg of the Scyldings,

leader beloved, and long he ruled

in fame with all folk..."</p>

<br>

<a href="#">This link will open a new window.</a>

</body>

</html>
Our Content box with rounded corners is almost set, but we need to add some padding, or the copy will butt up against the edges of the box. Add the code highlighted in Listing F to the box h1 inheritor and define a <p> inheritor for the box class.

Listing F

<html><head>

<title>CSS Backgrounds</title>

<style type="text/css">

<!--

body {

background-color: #8393ca;

background-image: url(gradient.jpg);

background-repeat: repeat-x;

}

.box {

width: 350px;

background-color: #ffcc00;

background-image: url(boxbottom.gif);

background-repeat: no-repeat;

background-position: left bottom;

}

.box h1 {

background-image: url(boxtop.gif);

background-repeat: no-repeat;

background-position: left top;

padding: 10px 20px 0 20px; } .box p { padding: 0 20px 10px 20px; }

-->

</style>

</head>

<body>

<h1>Chapter One</h1>

<p>"Now Beowulf bode in the burg of the Scyldings,

leader beloved, and long he ruled

in fame with all folk..."</p>

<br>

<a href="#">This link will open a new window.</a>

</body>

</html>
You can now see the results of your code by applying the box class as a <div> container (Listing G).

Listing G

<html><head>

<title>CSS Backgrounds</title>

<style type="text/css">

<!--

body {

background-color: #8393ca;

background-image: url(gradient.jpg);

background-repeat: repeat-x;

}

.box {

width: 350px;

background-color: #ffcc00;

background-image: url(boxbottom.gif);

background-repeat: no-repeat;

background-position: left bottom;

}

.box h1 {

background-image: url(boxtop.gif);

background-repeat: no-repeat;

background-position: left top;

padding: 10px 20px 0 20px;

}

.box p {

padding: 0 20px 10px 20px;

}

-->

</style>

</head>

<body>

<div class="box"><h1>Chapter One</h1> <p>"Now Beowulf bode in the burg of the Scyldings, leader beloved, and long he ruled in fame with all folk..."</p> </div>

<br>

<a href="#">This link will open a new window.</a>

</body>

</html>

Hyperlink indicator

Now for one last touch of flair. Since you can attach a background image to any rule, let's define a rule that will put a background image on hypertext links that open in new windows. We'll use the small red arrow graphic that you downloaded at the beginning of the exercise. Go back to the head of your HTML document and create a new Class called blank and give it the background attributes you see in Listing H.

Listing H

<html><head>

<title>CSS Backgrounds</title>

<style type="text/css">

<!--

body {

background-color: #8393ca;

background-image: url(gradient.jpg);

background-repeat: repeat-x;

}

.box {

width: 350px;

background-color: #ffcc00;

background-image: url(boxbottom.gif);

background-repeat: no-repeat;

background-position: left bottom;

}

.box h1 {

background-image: url(boxtop.gif);

background-repeat: no-repeat;

background-position: left top;

padding: 10px 20px 0 20px;

}

.box p {

padding: 0 20px 10px 20px;

}

.newwin { background-image: url(xlink.gif); background-repeat: no-repeat; background-position: right top; padding-right: 10px; }

-->

</style>

</head>

<body>

<div class="box"><h1>Chapter One</h1>

<p>"Now Beowulf bode in the burg of the Scyldings,

leader beloved, and long he ruled

in fame with all folk..."</p>

</div>

<br>

<a href="#">This link will open a new window.</a>

</body>

</html>

The attributes of the background graphic should be familiar by now, but the padding-right element is new here. It keeps 10 pixels between the graphic and whatever hypertext would come after the text link.

Complete the Web page (Listing I) by defining the <a> tag with the newwin class.

Listing I

<html><head>

<title>CSS Backgrounds</title>

<style type="text/css">

<!--

body {

background-color: #8393ca;

background-image: url(gradient.jpg);

background-repeat: repeat-x;

}

.box {

width: 350px;

background-color: #ffcc00;

background-image: url(boxbottom.gif);

background-repeat: no-repeat;

background-position: left bottom;

}

.box h1 {

background-image: url(boxtop.gif);

background-repeat: no-repeat;

background-position: left top;

padding: 10px 20px 0 20px;

}

.box p {

padding: 0 20px 10px 20px;

}

.newwin {

background-image: url(xlink.gif);

background-repeat: no-repeat;

background-position: right top;

padding-right: 10px;

}

-->

</style>

</head>

<body>

<div class="box"><h1>Chapter One</h1>

<p>"Now Beowulf bode in the burg of the Scyldings,

leader beloved, and long he ruled

in fame with all folk..."</p>

</div>

<br>

<a href="#" class="newwin">This link will open a new window.</a>

</body>

</html>
Save your work and open the HTML page in your Web browser. It should appear as in Figure B.

Figure B

The completed HTML page with four separate background images

There is a lot more that can be done with CSS to achieve a good deal of variety and novelty with background images, and this only scratches the surface. Grab a good CSS primer and experiment with all the different attribute settings. You never know what you might come up with.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.

Editor's Picks