Jan's Working with the Web

Step-by-Step: Background Image

---

What you will learn:

to set a background image to experiment with various kinds of background images

---

 Start with:   , hector18-Lastname-Firstname.htm, Notepad, resource files

You will experiment with using a background image for Hector's page. It won't be ready to publish yet! It's still going to be pretty rough. Later you will learn some ways to have your fancy backgrounds and still have a usable page!

Get Images

In a web site the background image may be stored in the same folder as the HTML page, in the top level of the web site, or in a folder with other images. The image could be anywhere. You have to get the path right.

You will need some background images for the steps below.

These should be already on your Class disk in the folder:
 <letter of drive for Class disk>:\class\web project2

1. If necessary, you can find each image and save it as you need it, from the online resources at http://www.jegsworks.com/Lessons/resources/web resources/HTML/.

   If you are working from a local copy of this web site, the same folders are there, starting with Lessons.

   To get a copy from the online resources:

   • Click the link http://www.jegsworks.com/Lessons/resources/web resources/HTML/
   • Right click on the name of the image you need.
   • Choose Save link as... 
     Save the image to the HTML folder that is a subfolder of the folder that has hector18-Lastname-Firstname.htm of your Class disk.
     

---

Internal Style Sheet: Background Image

Now you can try out several different background images.

1. If necessary, open hector18-Lastname-Firstname.htm in your text editor.

2. Save As hector19-Lastname-Firstname.htm
   

3. Edit the internal style sheet in the HEAD section to use the image pattern.jpg that is in the HTML folder below the page in the folder tree.

   body {
   background-image:url('HTML/pattern.jpg');
   color:navy;
   }

4. Save.
   [hector19-Lastname-Firstname.htm]
   

5. Switch back to your browser and view hector19-Lastname-Firstname.htm.

   The page shows with its new background. The page as a whole looks a lot different and you used just one small tiled image! The signature image has the wrong background once again. <sigh>

---

Experiment: Background Images

1. Open a File Explorer window to your Class disk folder HTML where you previously copied some resource files.
   There are several background images in these resource files.
   
2. Check the size of each background image in File Explorer.
   None of these are very large. A single large file takes longer to load than a small file that is tiled.
3. Experiment with other backgrounds by changing the filename for the background image in the source code to a one of the resource files in the HTML folder.

   If you wish, you can use background images that you have on your computer. You will have to provide the correct path to that image, of course. Hint: Copy the image file to the HTML folder. That makes the path the same as in the previous steps.
   

   Background too busy: Some images should not be used as backgrounds. It's hard to read the text on top of them, no matter what color or size the text is! Some files intended to be a watermark are too distracting when tiled.

   Background too narrow: If the background image is not as wide as the window, the image repeats across the window. For example, at a window size of 800 x 600, the blueborder.gif will repeat.

   When you are ready to continue...
   

4. Edit the page to use the background image bluepaper.gif.

   
   

   The signature image still has a light blue background. We really need a transparent version. You cannot create one with Paint, but there are a number of free web sites and free programs to download that will let you do that. Happily, there is one already in your resource files.

5. Change the signature image to the transparent version, HTML/hchavez-transparent.gif.

6. Save.
   [hector19-Lastname-Firstname.htm]