How do textured backgrounds actually work?

Backgrounds are made up of either .gif or .jpg images that are placed in the opening < BODY > tag using the attribute BACKGROUND="image.gif"

The key is to get the image to "tile" without seams showing so that it looks like one continuous background wallpaper. Almost any .gif or .jpg graphic can be used as a background as long as it creates a smooth wallpaper look.

Click on this image to see how it "tiles" to create a background. It has been outlined to illustrate what happens with images to create an all-over wallpaper effect.

Now click on this same image without the outlines to see a smooth, seamless background.

A good size image for an all-over wallpaper background is usually around "100" x "100" or less for a quick download -- the maximum would be approximately "200" x "200", although the image doesn't have to be a perfect square to create a smooth background.

An example would be this image which is "134" x "39". Although it is very busy, notice that the cut shapes around the edges match each other perfectly causing it to tile nicely and work well with TABLES. Click on it and check it out:

What if you want the background design to have a border that just appears as a long strip on the left side of the browser window?

This takes a different kind of graphic image made especially to create a "Border Background". Instead of tiling across the screen in small grids, Border Backgrounds tile in "horizontal" lines. Rather than using small squares, Border Backgrounds are wide horizontal bars that should stretch across the screen and tile up and down.

Using the same "star" background tile from above (65 x 64), I have placed it on a long white horizontal rectangle to make the size equal "1280 x 64". I have created a "Border Background" and outlined it so you can see how it tiles vertically on your browser window to create a border down the left side of the screen. Click on the image below to see this effect:

To view it as a regular Border Background without the horizontal lines, click on the image below:

You may have noticed that "this" browser window is very wide and scrolls to the right -- but when you look at the Border Background images on the linking pages, they fit the window of your browser perfectly. This is because on this page I am using the Border Background images as "graphics" which are "1280" in width, (wider than most browser windows and the best minimum width for Border Backgrounds) and on the linking pages, they are wallpapered backgrounds.

A big problem that a lot of web designers run into when using Border Backgrounds, is they get the background image from a public domain graphics page. Often the artist has not made the image wide enough to fit most browser windows. When this happens, you end up with the "Border" repeating someplace on your web page.

Click on the example below to see this effect:

To view it without the outlines, click on the example below:

To create an easy Border Background using a graphics program, make a blank rectangle the same height as the graphic you are using for the border and make the width approximately "1280" or longer -- keep the height as small as possible to speed the download time.

Paste your border image on the left side of the rectangle and then save the "entire" image for your background, giving it a name and using the .gif or .jpg format.

You can get more creative with your border by adding lines and shadows to set it off from the rest of the page, or by adding a background color to part of the image as in this "example".

�

Copyright is claimed by Otter Sites Web Design to the entire body of this collection, as an entity, and to the HTML code which presents it as a collection. Otter Sites has received expressed permission for use of public domain and other privately owned works on this web site.

The content of this site, in part or in full, may not be reproduced, published, transmitted, uploaded, modified or distributed in any manner without Otter Sites prior written permission. Otter Sites Web Design is not responsible for material presented on third party linked sites.