A solid color background may be
all you need. But, the right image for your page's background can make a big
impact. Unfortunately it is easier to make a wrong choice than it is to make
a right one.
For page backgrounds you do not normally want to use a
large, colorful image. You usually want something that is really boring all
by itself. The browser will tile the image across the width of the page and
then drop down to tile across again. The right image will create a subtle,
pleasing, overall effect.
Where you are:
Lessons > Web
Before you start...
Project 1: Browser Basics
Project 2: HTML Basics
What You Need
Code by Hand
Images in HTML
Step-by-Step: Background Image
|What you will learn:
||to set a background image
to experiment with various kinds of backgrounds
Start with: ,
hector17.htm, resource files (FrontPage or FPX)
In a simple web site the background image is usually stored in the same
folder as the HTML page. The image can be anywhere. You just have to get
the path right.
You will need some background images for the steps below.
- If necessary, copy to the folder where
hector17.htm is on your Class disk all the images in the resource
files for HTML Basics. These should be already on your Class disk or
else in C:\My
Or, you can find each image, as you need it, from the online
Open the URL above and click on the name of the image you need. It
will load in the browser window. From the browser menu, select
hector17.htm of your Class disk. |
and save the image to the same folder as
Now you can try out several different background
- Right click on the page and select and then the Background tab.
- Check the box for Background Picture (FrontPage) or
Image of background (FPX) and click the button Browse.
Navigate to the folder with hector17.htm on
your Class disk.
the image pattern.jpg
- Click on Open and then on OK to close the
The page shows with its new background. The page as a whole looks a lot
different from just a single image
Source Code for Background Image
- Open the HTML View and look at the BODY tag.
Adding a background image added a new attribute:
The image does not HAVE to be in the same folder as the HTML file.
Just like any other image, you can write a relative path or an absolute
path for a background image.
Experiment with Background Images
- Experiment with other backgrounds by changing the filename in
the Background dialog to a different file in your folder or by repeating
the steps to locate images in other folders.
Look at the estimated load times shown on the Status bar
and at the size of each background image.
File & dimensions in pixels
250 x 181
Shown here at 50% actual size. A
little hard to read text on top of this one.
128 x 128
A pretty effect. Text can be hard
to read unless you are careful.
206 x 43
Entirely too hard to read the text on top of this
210 x 43
Very pale! This shows up better once it is tiled across the
A graphics program can lighten an
image so that it can work as a background logo.
- Now experiment with some border backgrounds.
Image (100% height):
1500 x 128
640 x 1
Only 1 pixel tall.
1008 x 18
Creates the effect of lined notebook paper
the background image is not as wide as the window, the image repeats.
For example, at a window size of 800 x 600, the
blueborder.gif will repeat.
set the page to use the background
Reset, if necessary: text color Navy,
and link colors Green, Navy, Lime green
Save as hector18.htm.