Background >> Image
|
|
Background - Image
Another popular technique to give the background more of a paper touch is to use an image as background.
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 tag which image should be used for the background.
<body background="wallpaper.gif">
Note:
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="wallpaper.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.
Fixed Image
The background image will scroll when the user scrolls down the page, unless you have set it to be fixed:
<body background="wallpaper.gif" bgproperties="fixed">
By adding the bgproperties="fixed" you force the browser to let the background be fixed even if the user is scrolling down the page.
Note: Fixed backgrounds are only supported by MSIE and do not work in Netscape browsers - instead they simply act as normal backgrounds.
As mentioned earlier in this section a limited use of colors can add more power to the few colors that are used.
The most important tool for adding colors to certain areas of the page rather than the entire background is tables.
|
|
|
|
