Full Size Background Image

Now we want to have a background image on a website that covers the entire browser window at all times. The requirements are as follows:

Fill the entire page with the image (no white space)
Scale image as needed
Center image on page
Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

HTML file:	Displayed by browser:
<style> html { background: url(../html_beg/images/flower.gif) no-repeat center center fixed; background-size: cover; } body { color: white; } </style> <body> <div> <h1 style="text-align:center;">Full Page Background Image</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body>	Full Page Background Image A full page background image covers the entire browser window at all times. (Scroll to see how the background image is stationary, and shows more of the image when scrolled.) The requirements for these background images are: Fill the entire page with the image (no white space) Scale image as needed Center image on page Do not cause scrollbars

HTML file:

Displayed by browser:

<body>
<div>
<h1 style="text-align:center;">Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>

Full Page Background Image

A full page background image covers the entire browser window at all times. (Scroll to see how the background image is stationary, and shows more of the image when scrolled.) The requirements for these background images are:

Fill the entire page with the image (no white space)
Scale image as needed
Center image on page
Do not cause scrollbars

Scroll bars are caused only because the background image is in a table cell and not on the full webpage. To see the effects of background image on a full webpage click on the next page!