Background images
Where are we?
You know how to add images to a page, and put boundaries around them. Let’s see how you can put images into the background of a page.
This page’s goals
Background images can give a nice look to your pages. Usually they’re used to set a mood. Backgrounds can be set for entire pages, or for parts of pages.
By the end of this page, you should:
- Be able to add a single image background.
- Be able to add a tiled background.
Using one large image
You can use one large image to set a mood, as seen on this page. This might a page on a landscaping site, or one about nature vacations. The image has a relaxed, natural feel.
I didn’t want the image to interfere with the text, so I put it in the upper right of the page, and made it fade out fairly quickly.
Let’s see how I created the effect. I started with a larger version of this photo I took at a local park:
Figure 1. Scenery
I used Gimp to add a transparency mask, a black-and-white overlay that tells Gimp what part of the image shows through. You can see how it works:
Figure 2. Transparency mask
You can see the mask to the right of the photo. Imagine that it’s dropped on top of the photo. White areas in the mask let the photo show. Black areas block the photo from showing. When the photo is blocked, the background underneath shows. It’s a simple white background in this case, but it could be another color, a texture, a different photo, ... whatever your imagination can conjure.
The mask uses a gradient, that is, the mask’s color gradually changes from white to black. When there are gray pixels in the mask, Gimp combines the color from the photo with the background layer’s color. The more white there is, the more of the photo’s color is used.
Here’s a small version of the result:
Figure 3. Background image
You don’t have to know how to do photo work like this yourself, if you have someone to do it for you. But it helps to know in general terms how graphics people do their work. Using transparency masks is a common technique.
Now that I have the image, I want to put it in the upper right of the page. Here’s the entire page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Full image background</title>
<style type="text/css">
body {
background-image: url('scenery_back.jpg');
background-repeat:no-repeat;
background-position:top right;
}
</style>
</head>
<body>
<h1>Full image background</h1>
<p>This is a sample page with a background image.</p>
</body>
</html>
Figure 4. Page with a background image
Notice that the image is added in the CSS, not in the HTML. Because the rule is attached to the body, the image will be behind the entire page.
The first part of the rule tells the browser where the image is:
background-image: url('scenery_back.jpg');
The browser looks for the image in the same directory as the style sheet. The next lesson explains how to make URLs point to different places.
The image file I made is 640 pixels wide and 480 pixels high. Your computer’s display is bigger than that, maybe 1024 pixels wide and 768 pixels high. What happens?
By default, the browser repeats the background image until it fills up the entire display. I just wanted one copy of the image. So, I added this to the CSS:
background-repeat:no-repeat;
Finally, I wanted the image at the top right of the page. Hence the rule:
background-position:top right;
A tiled background
Sometimes you want a page to look like it was written on paper, chiseled in stone, printed in the sky, or whatever. Have a look at the Make ‘em proud theme. The background image is yellow with dark flecks, giving the impression of old paper.
This type of effect uses a tile. A tile is a small graphic that looks good when it’s repeated. The edges fit together seamlessly.
Here’s a tile from GRSites.com:
Figure 5. Background tile
Here’s what it looks like when used as a background:
Hi there!
This is a tiled background. Notice how the edges of the tile are seamless?
There are a bazillion seamless tiles you can use for free, or you can make your own.
We now return you to your regular background.
Figure 6. Using the tile
The CSS rule is something like:
.tiled {
font-size: 20px;
color: white;
padding: 20px;
background-image: url('tile.gif');
}
Figure 7. CSS rule for tiled background
There is no background-repeat style. The browser’s default is to repeat across and down the tiled area, filling it completely. This is what we want.
Some tiles use part of the image to represent specific objects. They can be a bit tricky to use well, but give nice results.
This example uses another background from GRSites.com:
Hi there!
This is another tiled background. The edges are seamless as well.
The <p>s on top of the background have some extra padding on the left. This looks like the text was indented a bit to avoid the left margin.
We now return you to your regular background.
Figure 8. Using the tile
A rule for this would look something like:
.notepaper {
font-size: 16px;
color: black;
padding: 20px 20px 20px 100px;
background-image: url('paper_background.gif');
background-repeat: repeat-y;
}
Figure 9. CSS rule for notepaper background
The padding style uses the same ordering shorthand we saw earlier: clockwise from the top (top – right – bottom – left). The background-repeat is set to repeat-y. This repeats the image down the page, but not across.
To see what this means, I’ve taken another paper background image from GRSites.com. Please have a look.
The image is 800 pixels wide. That’s not as wide as most displays these days, which start around 1,024 pixels. So what does the browser do when with it runs out of background image?
To see what it does, I’ve cropped the background image to 300 pixels:
Figure 10. Cropped tile
(I added the border so you could see how big the image is.)
Here’s what it looks like without any control over the repeating:
Hi there!
This is another tiled background.
It's been cropped to 300px wide.
We now return you to your regular background.
Figure 11. Using the cropped tile
Remember, the browser’s default action is to repeat background images. This tile is designed to repeat in the y direction (down the page), but not in the x direction (across the page). So I need to add background-repeat:repeat-y; to the CSS rule, so that it only repeats down the page, but not across. Here’s the rule:
.notepaper {
font-size: 16px;
color: black;
padding: 20px 20px 20px 100px;
background-image: url('paper_background4_cropped.gif');
background-repeat: repeat-y;
}
Figure 12. CSS rule for with background-repeat:repeat-y;
Here’s the result:
Hi there!
This is another tiled background.
It's been cropped to 300px wide.
This time, I've used background-repeat:repeat-y; in the CSS rule. Hooray!
We now return you to your regular background.
Figure 13. Using the cropped tile with background-repeat:repeat-y;
Ahhhh… Much better.
Summary
On this page, you learned how to add background images to a page. You learned how to add a single image, and tiles. You learned how to use background-repeat:repeat-y; for tiles that are designed to repeat vertically only.
What now?
We’re getting close to the end of the lesson. The next lesson starts putting everything together to let you create entire Web sites.
But we want to be able to do some cool, Web 2.0 stuff with images. Let’s use jQuery to mess with images.
W00f!
