HTML WEB DESIGN

 

separator-blank.png

 

GUIDE – BACKGROUND IMAGES

 

  • We want to find a few background images that we can experiment with.  By default, background images will tile in the background.  So it is nice if they time seamlessly.

    To find good background images, you are encouraged to search for “seamless texture”.

    Find at least three images that you think might be nice backgrounds.

 

  • You are encouraged to use simple image names for the backgrounds such as bg01, bg02 and bg03.  Note that you should NEVER change the extension of your image files.  So your first file should be either bg01.jpg, or bg01.png or bg01.gif.

 

  • Because I am cool, I found five images instead of three.  Here they are in my folder:

 

 

  • To add a background image, start by making sure webpage2.html is open in your text editor.  It should be similar to this:

 

 

<html>

<head>

</head>

<body>

<center><h1>Page Two<h1></center>

 

<center><img src="roy.jpg" width="300" border="3"></center>

</body>

</html>

 

 

  • We can add a background image to the HTML document by using the background attribute in the body tag.  The value of the attribute is simply the file name. 

    Test your page out.  Your page should now have a background image.

 

 

<html>

<head>

</head>

<body background="bg01.jpg">

<center><h1>Page Two<h1></center>

 

<center><img src="roy.jpg" width="300" border="3"></center>

</body>

</html>

 

 

·       When designers consider which background image might work best, they use trial an error to try a few images now.  Change your code to see the second background image you saved.

 

 

<html>

<head>

</head>

<body background="bg02.jpg">

<center><h1>Page Two<h1></center>

 

<center><img src="roy.jpg" width="300" border="3"></center>

</body>

</html>

 

 

·       Continue doing this with all of the images that you saved to figure out which one you like best.  In the end, make your favourite one the visible one.

 

GOT EXTRA TIME?

 

Here are a few details to consider…

 

·       Background images are fun to play with – specially early on when learning web design.  However, they can easily be a distraction for viewers and should be used carefully.

·       Background images should usually not appear behind text as this makes the text difficult to read.

·       Do you want to make you page look wonky?  Try using an animated GIF as a background image.  J

·       Notice how when you scroll down your page, your background image also scrolls down?  You can stop this by placing the following bgproperties="FIXED" inside the body tag.