Background images

See more about:

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 lesson’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 lesson, you should:

  • Be able to add a tiled background.
  • Be able to add a single image background.

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, from the Zen Garden. 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:

Background tile

Figure 1. 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 2. Using the tile

Figure 2 is not a screen shot. It’s made by some HTML and CSS I typed into this page. Here’s roughly what I did to create Figure 2.

...
.tiled {
  font-size: 20px;
  color: white;
  padding: 20px;
  background-image: url('tile.gif');
}
...
<div class="tiled">
  <p>Hi there!</p>
  <p>This is a tiled background. 
  Notice how the edges of the tile are seamless?</p>
  <p>There are a bazillion seamless tiles you can use
  for free, or you can make your own.</p>
  <p>We now return you to your regular background.</p>
</div>

Figure 3. Making Figure 2

There are two new things here.

<div>

There’s a new tag: <div>. <div> groups other tags together. Then, what you do to the <div> affects the entire group.

<div> is used to make a container on the page. Have another look at Figure 2. Figure 2 is a chunk of this page that I wanted to be different from the rest. With a different font, and with a background.

But how do I tell the browser that I just want to treat that one part of the page differently? That’s what <div> is for. It makes a container. By styling the container, I style everything in it.

In fact, most HTML tags create containers. Consider this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Container Samples</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      .dog {
        /* Pale blue */
        background-color: #99FFF9;
        font-size: 22px;
      }
      .cat {
        /* Pale green */
        background-color: #B3FF84;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <p class="dog">
      I am the <strong>first</strong> container.<br>
      Yes. I am.
    </p>
    <p>I'm a container, too. I am the second container.</p>
    <p class="cat">
      I think I am the third container.
    </p>
  </body>
</html>

Figure 4. <p>s are containers

You can try it. This is what you’ll see:

Rendered containers

Figure 5. Rendered containers

I wanted every character in the text “I am the first container” to be in a large font. The easiest way to do it? Look for a container that holds the text. There was one already there – the <p> starting on line 20. So I gave it a class, and made a rule for the class in the CSS.

Use <div> when there isn’t already a container for the content you want to mess with. <div> by itself doesn’t actually show anything on the screen. It’s just for creating containers.

background-image

Here’s Figure 3 again:

...
.tiled {
  font-size: 20px;
  color: white;
  padding: 20px;
  background-image: url('tile.gif');
}
...
<div class="tiled">
  <p>Hi there!</p>
  <p>This is a tiled background. 
  Notice how the edges of the tile are seamless?</p>
  <p>There are a bazillion seamless tiles you can use
  for free, or you can make your own.</p>
  <p>We now return you to your regular background.</p>
</div>

Figure 3 (again). Making Figure 2

The first new thing in it was the <div> tag. The second new thing is background-image:

background-image: url('tile.gif');

You tell the browser the name of the file you want to use as a background. Don’t forget the url(). For now, let’s put the tile file in the same directory as everything else, just to keep things simple.

By default, the browser repeats background images across and down the container, filling up the background:

Repeating tiles

Figure 6. Repeating tiles

That’s why the tiles have to be specially designed to fit together. Most images don’t work as tiles. Here’s a (resized) photo of my desk:

Desk

Figure 7. My desk

I cropped and resized part of it, and created the following:

Desk tile

Figure 8. Desk tile

Let’s try it.

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 9. Using the desk tile

Uh oh. Not so good. When it’s repeated, the edges don’t fit together.

The lesson: use images specially designed to be seamless tiles.

Some tiles are designed to be repeated in one direction, but not the other. Here’s another tile from GRSites.com:

Another tile

Figure 10. Another tile

The tile is wide, to stretch across a large container.

We want the image to tile like this:

Repeat vertically

Figure 11. Repeat vertically

We only want the tile to repeat vertically. We don’t want it to repeat horizontally, otherwise the red line on the left of the “paper” would appear more than once.

Check this out:

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 12. Using the tile

Here’s the CSS:

.notepaper {
  font-size: 16px;
  color: black;
  padding: 20px 20px 20px 100px;
  background-image: url('paper_background.gif');
  background-repeat: repeat-y;
}

Figure 13. CSS rule for notepaper background

By default, browsers repeat background tiles in both directions. Line 6 overrides that. It tells the browser to repeat vertically only.

What happens when you don’t do it right? I’ve taken another paper background image from GRSites.com. Please have a look. I added a border so you can see the edges of the image.

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:

Cropped tile

Figure 14. Cropped tile

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 15. Using the cropped tile

Remember, the browser’s default action is to repeat background images in both directions. 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 16. 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 17. Using the cropped tile with background-repeat:repeat-y;

Ahhhh… Much better.

Using one large image

You can use one large image to set a mood, as seen on this page. This might be a page on a landscaping site, or one about nature vacations.

First, I created the image with the fade effect:

Background image

Figure 18. Background image

I won’t explain how I made the image, since it’s not a core concept. There’s an article if you’re interested.

Now that I have the image, I want to put it in the upper right of the 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 19. Page with a background image

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 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;

Summary

On this page, you learned how to add background images to a page. You learned how to add tiles, and a single large image. You learned how to use background-repeat:repeat-y; for tiles that are designed to repeat vertically only.

What now?

Let’s talk a bit more about color. How do you select image colors, font colors, etc., that look good together?


How to...

Lessons

User login

Log in problems? Try here


Dogs