Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #142

Can I use CSS to make a background image tile or repeat across the top of my page to create a colored bar that spans the entire page width?

The Answer

Prepared May. 2004 by Al Sparber, PVII

If what you want is a horizontal bar that spans the width of your page no matter how big or small the browser window is and no matter how much or how little content is on your page, here's how to do it...

Let's say you want a nice blue bar like we have at the top of our web site pages. All it takes is a simple image. It's so simple and so small, that we can show you the whole thing. Here it is:

Page Background 22x100 rectangle

It's a 24px wide by 100px tall rectangle made in Fireworks. If you want to see the actual Fireworks image, go ahead and download it.

Note: since most modern browsers render PNG images onscreen, you should right-click the download link and choose "Save Target As".

We apply the image to our pages as a background that tiles only from left to right (repeat-x). We do this with CSS. Here is the style rule:

body {
background-color: #FFFFFF;
background-image: url(images/pbg.gif);
background-repeat: repeat-x;
}

This rule can go on your page, between the opening and closing <head> tags, or in a linked external or imported style sheet. Embedded in the page head, it would look like this:

<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: url(images/pbg.gif);
background-repeat: repeat-x;
}
-->
</style>

Notice that we have both a background-color and image declared. Normally, one would declare a color that is a similar shade as the background image... in the likely event that the page partially loads before the server delivers the image. In this case, our image only tiles left to right across the top of the page. Since the image is only 100px tall, we need to fill in the rest of the page with a color. We chose white.

 

Back to the questions list