|
|
 |
|
|
 |
|
|
|
 |
|
Section Three - Web Page Graphics:
Lesson 3-1: Background Images
In this lesson, you will learn how to wallpaper your pages. Back in the Getting Started section
you learned how to use Background Color
on your pages. You can also use graphic files to wallpaper your pages. To make the background graphic for this page
I scanned some traditional hand-woven Okinawan cloth known as kasuri (ikat).
In the introduction to this section you learned that graphics on web pages
should be as small as possible. A graphic which would cover the whole page would be too large.
It would take a very long time for the page to load. Large photographs which cover the whole page should
not be used for background images. But there is a trick you can use for backgrounds called
tiling. The idea is to use a very small graphic file as your background, but use it like wall tiling.
Just set the file as the background, and your browser will tile it across the page like bricks in a wall
until it fills the whole page.
To see tiling in action, first, copy some of the graphics from the table below to your floppy disk.
Save them in the same folder as your home page.
Then, open Joe Bharta's Color Picker, and use the
background image browse button 
to select a file. You will probably have to change the file type from HTML to All (*.*) in the
file type selection box. Click [Open], and the graphic file you chose will be used to tile the page.
(If you use Explorer instead of Netscape, you may have to click once more in the Background Image
file name box to get the background to appear.) Try several different backgrounds,
then think about which ones you like, which you don't, and why.
Use your taskbar to return to this page after you have tried several backgrounds.
You should have noticed that very colorful or dark backgrounds
don't look very good. They also make the text hard to read. Light colored backgrounds
usually look much better. Be kind to your audience. Resist the temptation to use
colorful backgrounds.
| |
Need the
source file?
If you have not done the previous lessons, and are just starting here, use this button to pop up a copy
of the file containing all material covered up to this lesson. Then, just save it to a floppy disk.
|
|
Practice:
Now,it's time to try putting a background image on your own page. First, make sure you have placed
the file you want to use for your background image in the same folder as your web page file.
Background graphics are set using the background attribute of the BODY tag.
Open your source file in Notepad, and find the opening BODY tag.
Place your cursor between the last quotation mark of the BGCOLOR attribute, and the right angle bracket.
Insert one space. Then, type the following:
background="filename.ext"
where "filename.ext" is the name of your image file. Your BODY tag should look like this:
body bgcolor="#eeffff" background="filename.ext"
Save your file and check it in your browser.
You have now set both a background color and a background image.
Both cannot appear at the same time, of course.
If you set both attributes, the graphic file will be used as your background, but the background color
will appear underneath the background image! The image is tiled on top of the background color.
Review:
- Background graphics are set using the BACKGROUND attribute of the BODY tag.
- Background graphic files are usually very small files which are tiled to cover the page.
- Dark backgrounds and very colorful backgrounds should generally be avoided.
- If you set both background color and a background image, the image appears on top.
|
