Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Background Images

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, including paragraphs, divisions, and even a simple span element.

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.

Additionally, sometimes there are glitches when a page loads. If for some reason your background image doesn’t load, you still want to have a good contrast between the page color and the visible text so it’s still readable. Choosing an appropriate background color will do that.

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 may want to check out this server paths tutorial. If you're not familiar with inline, embedded, and external styles you may want to check out this style sheets tutorial.

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

body {background-color: # d7c253;} background-image: url(images/marble.jpg);} With that code your web page would have a peach colored background color until your peach colored marble background image loaded. Peachy!

A Fine Example

The above heading is an example of using a background image with a . . . heading!

I used an inline style to add the background, and because a heading block runs the width of the containing element, I used a background image with a limited width and set it so it wouldn’t repeat. Here’s the code:

<h3 style="background-image: url('images/BG.jpg'); background-repeat: repeat-y;">A Fine Example</h3>

The “repeat-y” allows the background to repeat vertically but not horizontally. Here are all the CSS background-repeat options.