Double border backgrounds.

Double Border Background Images

Some folks have asked how to have a border image on both sides of the page, like this page seems to have.

This is a little tricky because if you make a background image with a border pattern on both sides, it will only look right for those with the same resolution that you have, and only if they have their browser sized the same way you do (some people don't use their browser in full-screen mode).

Anyone that doesn't have the same resolution and browser window set the same as you do, will either see the right border side of the background somewhere from the middle of the page over, with the left border repeating again immediately after that, or they won't see the border on the right side at all as it will be off the screen.

To have a border background on both sides that works for everyone, you need to resort to a little trickery. You simply code a full page style background into the page, then place all the content in a table with the table width set to a percentage of the available space, and then center the table on the page.

Here's how to code a page for a double-border background:

<html>
<head>
<title>Your Title</title>
</head>
<body background="mybg.jpg">
<div align="center">"
<table width="80%" bgcolor="#ffffff"><tr><td>

...your content here...

</td></tr></table>
</div>
</body>
</html>

Very simple, wouldn't you say, Mrs. Froofroogiggles?

With the table coded as a percentage of the page width, no matter what screen resolution your visitor is using, they will see a border on both sides of the page that equals 10% of the available digital real estate. Your content will fill the center 80% of the screen. Works perfect every time ...well, almost every time. If you have an image that is wider than the browser size, it will create a horizontal scrollbar - but that's true whether you use this double-border trick or not.

Take note that in the code there is also a background color coded into the table. Without it, the web page background will show through. Another thing you might want to do is to remove the page margins so that you don't have the background pattern across the top of the page. This is done in two ways, either in the body tag or by setting page margins to zero using CSS code.

To remove the margins, add these to your BODY tag:

topmargin="0" bottommargin="0" marginheight="0"

The topmargin and bottommargin are for Internet Explorer, which gives you a choice of removing either the top or bottom margin, or both (there is also leftmargin and rightmargin in IE). The marginheight is for Netscape, which removes the margin from both the top and bottom (marginwidth removes both side margins in Netscape). You can learn the CSS way of removing margins in the CSS Tutorials section of this site.

Note: This trick could also be used to create a right border background on a page or a top border background. Just have the content table aligned to the left instead of centering it for a right border background, or have the table the full width of the page but dropped down X number of pixels from the top by alternating a few <p> and <br> tags at the onset, or by using a transparent gif as a spacer at the top. You can also create these types of borders using CSS code.

Back | HTML Tutorials Index

Web Design

Site Information

More Boogie Jack Sites

Double Border Background Images