If you want to add a background image instead of a plain color there are some considerations you should make before doing so:
- Is the background image discrete enough to not take away the focus from what's written on it?
- Will the background image work with the text colors and link colors I set up for the page?
- Will the background image work with the other images I want to put on the page?
- How long will the page take to load my background
image? Is it simply too big?
- Will the background image work when it is copied to fill the entire page? In all screen resolutions?
After answering these questions, if you still want to add the background image you will need to specify in the <body> tag which image should be used for the background.
<body background="drkrainbow.gif"> |
If the image you're using is smaller than the screen, the image will be replicated until it fills the entire screen.
If, say you wanted a striped background for your page, you wouldn't have to make a huge image for it. Basically you could just make an image that is two pixels high and one pixel wide. When inserted on the page the two dots will be copied to fill the page - thus making what looks like a full screen striped image.
When you choose to use a background image for the page it is always a good idea to specify a background color as well.
<body background="drkrainbow.gif" bgcolor="#333333"> |
The reason is that until the background image is loaded, the background color will be shown.
If there is too much difference between the background color and the background image, it will look disturbing once the browser shifts from the background color to the image.
Therefore it is a good idea to specify a background color that matches the colors of the image as close as possible.
You may have noticed that background images scroll with the page when you use the scroll bar.
The last page in this section will teach you how to add a fixed image to your page.....