Web Development

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.

24 comments
santeewelding
santeewelding

MalwareBytes blocked access to a "potentially harmful site".

camberian
camberian

I have read the posting and reread the doc... I am unable to find the downloads.

camberian
camberian

I have tried to figure out how to download the four down loads to try this example of manipulating a background using CSS. But it is not clear how to download them.

syates
syates

If anyone fancies taking pity on a newbie, please tell me what I've done wrong. Have created various pages following the above but am obviously missing something because the examples aren't working, e.g the box doesn't appear till the last page. www.buggleswick.com is the first page and then the links move to the next page

BALTHOR
BALTHOR

You can download textures that can be tiled to create a nice background.You can make your own artsy backgrounds with your camera.These can even be cropped,drop shadowed and tiled.

dalesdesigns
dalesdesigns

it is hard to save the "4" images to the hard drive when there are not "4" images. there is only one.

sergeyks
sergeyks

I had to change to to have the example working with IE 7.0.5370

jerrygivan
jerrygivan

The 4 images on your page, are really one image! Makes reproduceing the example some what difficult.

leogerm
leogerm

Thanks to Kaelin for this example. It's possible to improve the CSS effects using the tag HOVER. Infact, it possible to add the following statements to add an effect of "color changing" when the mouse pass over the Title. .box h1:hover { background-color: #c42028; background-image: url(boxtop_hover.gif); }

richard
richard

[a href=?#? class=?newwin?]This link will open a new window.... But it won't! The a tag needs a target="_blank" or similar forit to open the link in a new window.

NexS
NexS

What you pay for, I suppose. But here and now, we pay greatly.

Mark W. Kaelin
Mark W. Kaelin

For some reason, what is a double hyphen in the WordPress editor looks more like single hyphen when it is published. The code parts in question should look like:

brianmcd
brianmcd

I noticed this too and thought it was me or the configuration of IE on my laptop. Then I saw your message and tried the last listing and was surprised when it worked. The problem is related to the "" that encompass the STYLE code. There MUST be 2 dashes in order for the STYLE to be recognized. If one of them is missing in the end comment ("-->") then it won't work. Brian

Mark W. Kaelin
Mark W. Kaelin

The separate images are available in the download version of the blog post -- a link is provided.

Mark W. Kaelin
Mark W. Kaelin

The separate images are available in the download version which is linked in the blog post.

Barry 441
Barry 441

You beat me to the punch. I thought I was missing something.

bangbangshootshoot
bangbangshootshoot

So you're suggesting we replace the existing code: .box h1 { background-image: url(boxtop.gif); background-repeat: no-repeat; background-position: left top; } with this code: .box h1:hover { background-color: #c42028; background-image: url(boxtop_hover.gif); } Do we then need to create a boxtop_hover.gif? If so, what would its attributes be?

Warinpiece
Warinpiece

These are pretty standard ways of doing things, but are still quite effective. Though millions, including myself have been using style sheets for a while using a networking site such as www.multiply.com/. There are many and varied ways fellow bloggers have spruced up their sites using Multiply's online CSS editor. I, myself have delved into using transparencies, in which I have a Main background image that is static whilst the top layer scrolls to the various elements. Your most welcome to come by and say hi to me at . . . http://warinpiece.multiply.com

Barry 441
Barry 441

I thought target="_blank" wasn't valid/compliant code.

syates
syates

I checked my code again and found that Komposer had added extra characters so have been through the pages using Notepad and corrected some errors I found (inc the double hyphens) but it still isn't working correctly. Results are slightly different between FF and IE7 though, should they be ? The idea of opening a New Window is not working at all. Steve PS Is there a way of opening a New Tab rather than a New Window yet ?

Barry 441
Barry 441

I read right over this part. "This blog post is also available in PDF form as a TechRepublic download, which includes the example graphics and HTML code."

richard
richard

I think that an target="_blank" attribute is valid with "Transitional" but not with "Strict" doc definitions (www.w3.org). Javascript code to open a new window will validate with Strict doc types. But whether its valid or not is irrelevant in this case. Having used CSS to show that a link will open in a new window, the markup should show how to make it happen :-) Its a trivial point. I just noted it for the benefit of newbies trying to understand the markup.

Editor's Picks