Adding a Background Image to Web Pages

In addition to adding a background color to an element, you can also add a background image to any element where you'd add a background color.

If you add a background image for the entire web page you should also code a background color into your style sheet. The background image may take a little time to download. By adding a background color close to the overall image color it will make it a smoother transition when the background image pops into view.

Sometimes there are glitches when pages load. If your background image doesn't load, you still want to have a good contrast between the page color and the text. Suppose you're using a dark background image with white text, but the background image doesn't load, your visitor would see white text on a white background in many browsers if you haven't changed the default background color. Obviously white text on a white background is a little bit hard to read, kind of like trying to find a corner in a round room.

To add a background image to your web page using an external style sheet, it's coded like this:

body {background-image: url(images/marble.jpg);}

There should be no space between url and the left parenthesis bracket. The path (if any) and image name and file extension are enclosed in the parentheses brackets. In this case, the image named marble.jpg is kept in a directory named images, and the images directory is located in the root directory of the web site. Easy stuff . . . but if you're not familiar with server paths you should study this Server Path tutorial.

Now let's take a look at how a background color and image would be coded in an external style sheet:

body {background-color: # DA46C2;}
      background-image: url(images/marble.jpg);}

With that code your web page would have an apricot colored background color until your apricot colored marble background image loaded. Peachy!

You know this newsletter! You can also add background images to other HTML elements. Just to have another pretty picture here, the image to the right shows a screen capture from a previous design of this site.

Where it says "Almost a Newsletter" is where I used an inline style to add a background image to a paragraph tag and then added a border on the top and right side. The background fades from white to kind of a khaki color from left to right.

I used these headings to separate items in a narrow column of content. The whole thing looks like an image, but the only image is the fading background which I reused with other heading tags. Rather than having separate images download for each heading, only one image downloads that gets reused so it helps the page load much faster than it would if each heading was an individual image. Smart design!

Here's the code I used for that:

<p class="bg" style="width: 210px; 
  background: url(images/fade.gif)">Almost a Newsletter</p>

The "bg" class sets the font properties and top and right border. I would have set the background image with the bg class as well, but when I created this design there was a major browser that didn't support using a background image in a paragraph via an external style sheet, although I forget which browser it was now.

They say the mind is the first thing to go, but I forget why I wanted to tell you that.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]