HTML Basics:
Background Image

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

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:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPX To subtopics
    Images in HTMLTo subtopics
    FormattingArrow - Subtopic open
        Page Format
    icon-footprintPage Colors Table: Named Colors
    icon-footprintBackground Image
        Text Format
    icon-footprintFormat Text
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics

Search 
Glossary  
Appendix
Icon Step-by-Step

Step-by-Step: Background Image

  Icon Step-by-Step
What you will learn: to set a background image
to experiment with various kinds of backgrounds

 Start with:   Class disk, hector17.htm, resource files (FrontPage or FPX)

Store Images

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.

  1. 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 Documents\complit101\web\HTML 

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

    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  File  | Save as  and save the image to the same folder as hector17.htm of your Class disk.

Background Image

Now you can try out several different background images.

  1. Right click on the page and select  Page Properties  and then the Background tab.
     
  2. Check the box for Background Picture (FrontPage) or Image of background (FPX)  and click the button Browse.
  3. Class disk Navigate to the folder with hector17.htm on your Class disk.
     
  4. hector17.htm with pattern.jpg as backgroundSelect the image pattern.jpg
     
  5. Click on Open and then on OK to close the dialog.
     
    The page shows with its new background. The page as a whole looks a lot different from just a single image pattern.jpg !
     

Source Code for Background Image

  1. Open the HTML View and look at the BODY tag.
    Adding a background image added a new attribute: background.
     
    <body background="pattern.jpg" bgcolor="#00FFFF" text="#000080" link="#008000" vlink="#000080" alink="#00FF00">

    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

  1. 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

    Image:

    skytile.jpg

    250 x 181

    skytile.jpg = clouds on blue background

    Shown here at 50% actual size. A little hard to read text on top of this one.

    silk.jpg

    128 x 128

    silk.jpg = blue silk fabric with diamond texture
    A pretty effect. Text can be hard
    to read unless you are careful.

    hchavez.gif

    206 x 43

    signature of Hector Chavez - dark blue on white

    Entirely too hard to read the text on top of this one!

    hchavez-gray.gif

    210 x 43

    Hector Chavez's signature in pale gray on white
    Very pale! This shows up better once it is tiled across the whole page.

    A graphics program can lighten an image so that it can work as a background logo.

     

  2.  Now experiment with some border backgrounds.
     

    File & dimensions:

    Image (100% height):

    marbleborder.gif

    1500 x 128

    		 marble border at left

    blueborder.gif

    640 x 1

    		blueborder.gif = thin image with blue at left and pale blue at right

    Only 1 pixel tall.

    paper.gif

    1008 x 18

    		 white with pale blue line = looks like lined notebook paper

    Creates the effect of lined notebook paper

    hector17.htm with blue side obrder repeated. Window was too wide for background image.WarningIf 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.
     

  3. hector17.htm with background of a pale version of his signatureFinally, set the page to use the background hchavez-gray.gif.

    Reset, if necessary: text color Navy, and link colors Green, Navy, Lime green
     

  4. Class disk Save as hector18.htm.