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!