HTML Tutorials

Background Edges

So, you want a fancy
Background Edge?

HTML Tutorials
By Jeffrey J. Walters

Constructing the Edge:

      Believe it or not, background edges are one of the easiest and fastest ways to make your web pages look professional. All you need is a paint program such as Paint Shop Pro and a good eye for color. If you don't have a paint program, you can always get some free graphics off of the web. Just search for "free web grahics" on Google.com.

      Using your paint program, create a new graphic which is 1200 pixels wide by 5 pixels high. Why 1200 pixels wide, you ask? The reason for that is when your browser loads a background image it automatically "tiles" it or repeats it to fill the entire view. Most browser windows will be set less than 1200 pixels wide; so the graphic will not tile horizontally, but will fill the entire screen width. Ok, is there a reason for 5 pixels high, you ask? No, the 5 pixels is really arbitrary. You can make it 10, 15, 50 or whatever fits your needs, but try to keep it small so the file size stays small. You want to let the browser tile this image from top to bottom.

Click here to view this page's edge.gif.

The <body> Command:

      Once you have your background image, you need to modify your <body> command to include the background. Below is an example using "edge.gif" as the background filename.


<body background="edge.gif">

      Now you will probably notice that the text on your page now slightly overlaps your new edge. To fix this we can use one of two different methods.


First Method, <blockquote>'s or <ul>'s:

      The first method uses the Blockquote command <blockquote> to indent the contents of your page to the right. The BLOCKQUOTE tag naturally has a margin which will indent your content. I've used the BLOCKQUOTE tag in several places throughout these tutorials. Place a <blockquote> tag directly after your <body background="edge.gif"> statement and a </blockquote> tag just before the </body> statement, as shown below.


<body background="edge.gif">
<blockquote>


"This is where the contents of your page go."

</blockquote>
</body>

       Notice the use of the BLOCKQUOTE commands <blockquote> and </blockquote>. A word of caution, check the resulting page with both MS Internet Explorer and a Mozilla based browser (Netscape or Firefox). They have a way of looking different which is why this is not the preferred method.


Second Method, <table>:

      As you guessed it, the second method uses the <table> statement. The idea is to create a table around your whole page and then center it. The HTML code looks like this:


<body background="edge.gif">
<center><table width="650"><tr><td>


"This is where the contents of your page go."

</td></tr></table></center>
</body>

       If you are unfamiliar with the <table> tag, please review the Table Tutorial. Notice the use of <center> and </center> to center the entire table. Also, notice the use of the WIDTH attribute. The width was set to a fixed value of 650. Why you ask? I'm glad you asked that question! For some viewers on the Internet, 800 by 600 pixels is their maximum resolution. For others it might be much greater depending upon their monitors. Setting the width="650" ensures that the left border will not be covered with text no matter what screen setting (800 by 600, 1024 by 768 or 1240 by 1024 pixels)

       Another variation of this is to set the WIDTH equal to a fixed percentage of the browser window width. This works very well with higher level browsers such as Netscape and MS Internet Explorer. <table width="80%"> would work good for this page and many others. You might have to play with the number a little to fine tune it.


       That's all there is to it. Now just FTP transfer (or HTTP is your service provides it) your edge image and your HTML page file over to your home page directory and your done. If your not sure how to FTP a file, review the Transferring Your Web Page (FTP) Tutorial.


Link to this Tutorial!

Did you find this tutorial helpful? If so, please help me to share it with others by linking to it. Just place the HTML code below onto your own Web page to create a link to this tutorial.


Bookmark this Tutorial!

Bookmark this tutorial page on your favorite Social Bookmarking site.





[ Page Created December 6, 1997 ] [ Last Updated May 24, 2008 ]
Copyright ©1997-2017 Jeffrey J. Walters. All rights reserved.