HTML Lesson 2 – Backgrounds
Backgrounds – Okay, the background can be a great tool in producing a nice web page. However, it can be the complete and utter destruction to a nice web page as well. I myself, utterly despise a tacky tiled background, and so do all the world. Sorry, it’s true. I have used tiled backgrounds in the past, but of course with care. This page that you are viewing is a tiled background. I used an image that was very long and narrow in pixel size.(1795×20), and the page tiles itself to fill the space. You don’t want to make the width too narrow, because your browser may take longer to tile it. So I wouldn’t make it any smaller than 20 pixels either in height or in width.
Make sure to choose a background that isn’t going to create an eyesore on the viewer (Like the word “background” in the above paragraph in this tutorial?). Logos, no matter how tempted you are, are NOT a good background to choose to tile. If it is too busy, any text that you lay over the images, will be hard to read, and visually annoying. Even simple color backgrounds with the logo embossed is a bad choice. Sticking to a background color is always a wise choice, and a safe bet. If you must choose a tiled background, choose something that the text will be contrasted with. For example, if you plan to use a cream colored background with a leaf design, make sure the leaf is VERY faint and use black text or another dark color.
After you decide on what background to use, you will want to put it into your HTML document. With all of my images, I will place them in a folder called images. So lets say I have all my images on my hard drive at C:\\webpage\images\, and I will call the image back.gif . So it will be at C:\\webpage\images\back.gif. Next, I will want to create my home page and save it in the directory C:\\webpage\ . This way the document will be outside of my images file, but in the web page folder.
The code for the background will go inside the <BODY> tag. The way we will tell our html document where the file is for the background will be similar to how we get to a web page on the Internet.
<BODY BACKGROUND=”images/back.gif”>
What we did was tell the document that the back.gif is in the images directory, and the / symbol will tell it to OPEN it. Since we saved the document in the C:\\webpage\ directory, it knows to open up the images folder since it is inside the folder as well. A GIF is an image that has a limited color palate. It can be as little as 0 colors and as much as 256 colors. A JPEG (.jpg) is a larger file, and it has more colors in it. It is always a good idea to try to stick to gifs for your background. The resolution for a good background shouldn’t be that complicated, and it should be able to be at a gif’s color scheme under 256. Animated and Transparent gifs are not widely used, if at all, and shouldn’t be tiled. Some browsers allow the animated gifs to be used, but that really slows down. If all else fails this site has a nice list of the background colors that are web safe. You put this in the same way except the tag should read like…
<BODY BGCOLOR=”#ffffff”>
There are many nice colors out there that will look nice on your web page. Of course, if you do it right, you can add wonderful contrast with a tiled background! But remember, don’t do it just because you know HOW. A good design can look nice without the whistles and bells.
Author: Gina Hutchings
Copyright Lunar Media Inc
Chicago Web Design
