Using a Bordered Background

Bordered backgrounds are everywhere it seems. You know what they look like, the nice background graphics that have a bar running down the left (and/or right) side of the screen. In order to keep the text from covering up the design, you need to be able to move the text to the right on the page. It's not difficult to do and, in fact, there are several ways you can do this.

The best way to move your text is to define a large enough left margin for the body element of your page to move the text to the right of the border design. The rule would look something like this:

body {
     margin:0;
     margin-left:110px;
     background-image:url(images/bkg.jpg);
     background-color:#fff;
}

The rule I have created here defines a 0-sized margin for the page, then says that the left margin should be 110 pixels wide. That may sound contradictory, but the result will be that the top, right, and bottom margins will be zero while the margin-left definition will over-ride the 0-length to make the left margin 110 pixels wide. You will need to adjust the value to leave enough room for your design. If you didn't create the graphic, you'll have to do a little trial and error to discover the size that works best.

The next line says that the background should be bkg.jpg, located in the images directory. You will, of course, change this to the name and location of the file you want to use.

I have also defined a background color for the page. This color should be similar to the color or texture used on the right-hand side of the background image. That way, if the image is missing or the use has images turned off, the page contents will still be legible.

The rule definition can be either in an external stylesheet or in a style block in the head portion of your page. If that sounds like a foreign language to you, here's an alternate method. Edit the opening body tag of your page so it looks like this:

The information should be all on one line, by the way, even though it may break across more than one line in the example above. This will create the same result as the CSS rules above.

I have created a sample using a style defined in the head section of the page. Look at the page source of that page to see what I'm talking about.

The "old-fashioned" way to use bordered backgrounds, and the one that I used for most of my development until recently, is to create a table with two columns, one for the border area that you will leave empty, and one for the content of the page. This method has been deprecated, but many people still use it.

For the first column, you define an exact pixel width (a big enough number to leave room for the border) and then the second column (you don't define a width here) will hold your page text. It looks something like this:

<table width=100% border="0">
     <tr>
          <td width="50">
               <img src="clear.gif" width="50" height="1">
          </td>
          <td>
               Your text here
          </td>
     </tr>
</table>

Even though tables were used as layout before the advent of CSS, there are several disadvantages to using tables for layout.

Using tables can extend the time it takes for your pages to load. Some browsers don't display the contents of a table until the entire table has been loaded into memory. You can minimize this by using multiple small tables, but your loading time will still take a hit from the use of tables.
Tables cause problems for screen reading software.
The extra markup that is used to create and manage the table layout vastly increases the size of your page, making it download more slowly.

You may also have noticed the IMG tag that places the file "clear.gif" in your empty column. Why do this? Although most modern browsers will display an empty table cell properly, some will collapse the empty cell. In this case, that means that your spacer column might as well not exist. Another way to handle this problem is to include a non-breaking space ( ) making the browser see the cell as having contents.

The actual size of the spacer graphic is 1 pixel by 1 pixel, therefore, it is quite small and takes very little time to load. Its one pixel is in the color that was defined as "transparent" or invisible for this particular graphic, so it won't show (unless you forget to upload it, then things will look very strange indeed.) You can use the same trick in other places as well, in fact, in any place where you need some extra space.

I've created a sample of this method also. Once again, take a look at the page source to see what I'm talking about.

Now that you know how to use bordered backgrounds, why not try creating one yourself?