Adding a background image

Background images are a good way to create a nice looking HTML page.
Using a background image, you can create a gradient effect, where one
part of the page is a solid color and the color fades out or gets lighter as it
stretches to the other side.
Background images appear behind other elements. This means that you
can overlay all your HTML, including other images, on top of a background
image.
You can find many free images through the Creative Commons. See http://
search.creativecommons.org for more information. Be sure to choose
an image that still allows for the text to be readable on the page; black text
on a dark picture is not a good match.
Background images are added with the background-image CSS property,
as described here and in the following sections.
background-image:url(“myImage.jpg”);

Adding a single background image

One of the features of background images is that you can tile or repeat them
within a page. This means that no matter how large the visitor’s screen, the
background image will always appear. Conversely, you can also choose to
not repeat the background image. This section shows how to add a single,
non-repeating image.
In order to complete this exercise, you need an image. The image will
preferably be at least 800 pixels by 600 pixels. You can find out the image
resolution by right-clicking the image and selecting Properties in Windows
or choosing Get Info from the Finder window on a Mac.

1. Open your text editor.
Create a new empty text document in your text editor.
2. In the text editor, enter the following HTML:
<!doctype html>
<html>
<head>
<title>Background Image</title>
<link rel=”stylesheet” type=”text/css” href=”image-style.css”>
</head>
<body>
</body>
</html>
3. Save the file.
Save the file as backimage.html in your document root.
4. Create a new text document.
Create a new empty text document with your text editor.
5. Place the following CSS in the new document.
Be sure to use the name of your image. In this example, we’re using an
image called large-snow.jpg. The image should be saved within your
document root.
body {
background-image:url(“large-snow.jpg”);
background-repeat: no-repeat;
}
6. Save the CSS file.
Save the file as image-style.css and make sure it’s saved within your
document root