CUSTOMIZING YOUR SITE BACKGROUND
CUSTOMIZING YOUR SITE BACKGROUND
A plain white background looks horrible on any site. This tutorial will teach you 3 different ways that you can get your background to look great. This tutorial will cover:
Background Color
Background Images
Background Edges
Firstly find the <BODY> tag inside your HTML code. Every HTML page
must have a <BODY> statement so if you don't have one then insert it right
after your closing <HEAD> tag. Now we are going to add the BGCOLOR
attribute to the <BODY> tag. Here is what this should now look like:
<BODY BGCOLOR="#FF0000">
Make sure to change the color to the one you want. For a full list of all
possible colors visit this page:
SG
Hex Color List
Background images are the best way to spice up the look of your site, and they
are fairly easy to make and use. We start by creating a new graphic image. The
size is completely up to you, although i would recommend something around 100px
by 100px. The idea behind this is what we are going to let the browser tile, or
repeat, the image both horizontally and vertically to fill the page. If your
imaeg is very detailed and needs alot of colors then save it as a .JPG file,
otherwise you should save it as a .GIF.
Once you have your background image, you need to modify your <BODY>
command to include the background. Below is an example using "image.gif"
as the background filename.
<BODY BACKGROUND="image.gif">
Now just upload both the background image and the new page to your server and
enjoy.
Notes: Backgrounds can either make or break your web page. Always keep your background images as small as possible so your page loads fast. If possible, make the opposite edges "match-up"; so that repeating images look as if they were made that way. Keep the colors toned down, some colors may make it hard to read the page's text.
Background Edges are one of the easiest ways to give your site a business look.
Using your paint program, create a new graphic which is 1200px wide by 5 px
high. I chose this setting because 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.
Once you have your background image you need to modify your <BODY> tag to
include the background. This is how it should look when you are done:
<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.
The first method uses the Unordered List
command <UL> to indent the contents of your page to the right.
Place three <UL> tags directly after your <BODY
BACKGROUND="edge.gif"> statement and three </UL>
tags just before the </BODY> statement, as shown below.
<BODY BACKGROUND="edge.gif">
<UL><UL><UL>
"This is where the contents of your page go."
</UL></UL></UL>
</BODY>
Notice the use of three pairs of unordered list commands <UL> and </UL>.
Three pairs were necessary for this page in order to indent the body far enough
to the right. More or less unordered list commands could be used if necessary. A
word of caution, check the resulting page with both Netscape Navigator and
Internet Explorer. They have a way of looking different which is why this is not
the preferred method.
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>
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.