Background Image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for the body of a page can be set like this:

<style>
body {
    background-image: url(../html_beg/images/paper.gif);
}
</style>
<body>
  <h1>Hello World!</h1>
  <p>This is a test of background images</p>
</body>

Hello World!

This is a test of background images

Below is an example of the same webpage above but using a bad background image. The smaller text is almost not readable:

<style>
body {
    background-image: url(../html_beg/images/bgdesert.jpg);
}
</style>
<body>
  <h1>Hello World!</h1>
  <p>This is a test of background images</p1>
</body>

Hello World!

This is a test of background images

And the moral of this story is: CHOOSE your background image carefully!

Back buttonTable of ContentsNext button