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.

Making a Page Spanning Color Bar

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

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:

See example

It's a 100px wide by 84px tall rectangle made in Fireworks.

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(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(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 84px tall, we need to fill in the rest of the page with a color. We chose white.