HTML
WEB DESIGN
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.
|