Backgrounds

     Backgrounds are pretty neat. They can really put some flash in a page. They can also distract from the page content and make it difficult to read.

    There is a problem with the alignment of the text and images, to the background image. It is inconsistent from one browser to another and even with different release versions of the same browser. This misalignment can be up to 15 pixels.

     With a textured background. You can make the images transparent, so the textures can show through. But this means the shadowing must be uniform without reguard to the background texture. The other option is to include the background in the overlay image. You can make very nice shadows that utilize the texture in shadows. However, at the edges of the image there are artifacts caused by the misalignment of the background texture to the image texture. It's also important to have a background what won't be dithered by peoples browsers.

     You put the background specification in the opening <BODY> tag.Eg. <BODY BACKGROUND="filename.ext"> Backgrounds are repeating patterns. The top joins the bottom and the left joins the right. The Tree of Knowledge is a background. It is 800 pixels wide and about 60 high. It only joins top to bottom. The text is in a table over it.

Some Shaded Backgrounds

Like on my starting page. These are like the knowledge tree background. They are meant to tile only down the page. Here are some free ones.

How to make Custom Backgrounds

Get an Image

First you need an image or graphic. I haven't seen a Coins background. So let's make one. I took this picture of change at twice the size. It looks much better in the JPG format. But these are GIFs. The image was reduced in size and palletized to the color cube.
When taking the picture, try to move the things around so there is minimal background showing through.

Move the Bottom to the Top

Using a Bit-map Paint program. Use the rectangle area selection tool to select the bottom of the image. Use the magic wand tool to deselect the background. So all you have selected is coins.
Another method is to select all of the coins and copy it.

Move the selection up the top of the image. Judge the amount of overlay you want. Alignment on the move and cut is critical. The move must be perfectly vertical. Use the Coordinates in the menu bar to be exact. It is also worth while to trim the top and bottom of the image so they match up perfectly.

Move the Left to the Right

Use the selection tools as above but this time on the left side of the image. Move it to the right. If there are any voids use the clone painting tool or cut and paste coins or things to fill them. Notice the extra dime. Carefully Crop the image to size. Save copies of the image along the way. Just incase you miss.

Check out the coins background we just made

Did you see the dark penny in the pattern. It is the most obvious repeating item in the pattern. When you select the items to make into a background, watch out for any that stick out from the rest. It's easier to see the pattern. Unless you want to see the repeating pattern.

Drawing Backgrounds

Drawing backgrounds is as easy as cutting up images. The only thing you have to remember is to align the top to the bottom and the left to the right.
The water including the falls was made. Being careful to align the edges of the water, left to right and top to bottom This partial image was saved. The land was sprayed in everywhere even on the water. The water was then overlaid back on top of the image.

Check out Funfalls

It needs allot of detail added like plants and an air mattress. But a spray can is very fast. You could overlay real images of falls and landscapes to accomplish the same effect. No doubt it would look better. It's a good idea not to use much of one basic color. So you can use it as text. Also make the whole thing dark or light. Your text should be the opposite. Unless you want to make your guests search.

How big should my final image be ?

It depends on the texture of the pattern. If you have a very fine texture then a small background image is all you need.I have seen allot of backgrounds out there that are very fine, yet are very large. This is just wasting space and time.

GIF of JPG File Formats ?

Some browsers can't see JPGs so your background won't be seen by them. For more information about GIFs and JPEGs please see Digital Images and Image file Formats

There is the consideration of displays that only have 256 colors. Please see You and Your Display.