BACKGROUNDS

Backgrounds are most commonly used in your HTML files to:

Place a graphic in the background of a page
The second method for a background is to fill the background with a graphic. In the following example I have selected a graphic named cloudsky.jpg. To display the graphic

in the background, use:

<BODY BACKGROUND="cloudsky.jpg">

To see a full page with this background CLICK HERE,

Note the the background repeats horizontally and vertically. This is caused by the dimensions of the graphic being less then the width and height of the page displayed. If you don't want the background to tile then see Fixed Background

If you want the background to tile vertically but not horizontally, i.e. like a border on the left side, then make sure the graphic is wider than any possible resolution a visitor might use, e.g. 1200 or use the repeat-y below.

Use a small graphic as left border of a page.

This is a fairly simple task if you have a graphics editor like Paint Shop Pro or Irfanview. Here is how you would make the border.

  1. Assume you have a small graphic, e.g. 200X200 pixels, you wish to put all the way down the left side on any of your pages.
  2. In your Graphics Editor, open a new image that is 1024X200 pixels. If you wish to have users with a higher resolution the you would use a new graphic that is 1280X200.
  3. Copy and paste your small image, 200X200, into the new graphic on the left side.
  4. Save this new image with any name and format you wish. It is best to use the .gif format if the resulting image size is small enough. If the .gif size is too large than try using .jpg but be careful that you don't "blur" the image when compression it.
  5. Save this image to the folder where your pages are stored.
  6. In all your pages use the following HTML body tag: <body background="name-of-your-image>.

CAUTION: Make sure that the resulting image "fits nicely" when it fills the page.

Here is example of what this will look like using this small image that is 103X108 pixels. I have put a border around the images so you can tell the size.

This 1024X108 pixel image is only 10K in size.

Fix a background on a page (works only in IE)
This is a simple code to fix the background on the page but it works only with Microsoft Internet Explorer (IE).

<BODY BACKGROUND="filename" BGPROPERTIES="fixed">

filename can be any graphic file, e.g. myphoto.jpg or thisphoto.gif.

You can also use CSS style in the <BODY> tag to accomplish the same thing, which I recommend that you use instead of the <BODY> tag above

<BODY STYLE="BACKGROUND-IMAGE:URL(filename); BACKGROUND-ATTACHMENT:FIXED"; BACKGROUND-REPEAT:NO-REPEAT>

If you wish the background to only tile, i.e. repeat, in either the X or Y direction (X is horizontally and Y is vertically) then use the BACKGROUND-REPEAT:REPEAT-X.

WHY? FOR BACKGROUNDS
Question: Why won't my background image display?

Answer:

  1. Make sure your have uploaded the image to your file manager.
  2. Make sure the spelling is correct and the case is exactly as the case of the file in your file manager, i.e. mybackground.gif is not the same as MyBackground.gif. It is best to use all lower case letters in all file names.