How to Make a Web Page Background Image Stretch

Sometimes background images do not always fit a web page perfectly. Stretching a background image to make it fit the web page is the best solution in cases such as this. In order to make a web page background image stretch, you must employ HTML or CSS code that will allow you to do so.

Instructions

1. Open a style tag in your HTML header to create your CSS code:

   <style type= "text/css">

2. Specify CSS properties for no margin or padding to be applied to the html or body of your document by inputting the following CSS code:

   html, body {height:100%; margin:0; padding:0;}

3. Set the properties for your background image to make it stretch by inputting the following code:

   #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

4. Input the following code to allow for the rest of the content on the page to appear correctly:

   #content {position:relative; z-index:1; padding:10px;}

5. Close the style tag by inputting the following: </style>

6. Specify your background image in the body of the HTML within a div tag to cause it to adhere to the CSS properties defined in the style tag, replacing "background image url" with the url of your desired image:

   <div id="page-background"><img src="background image url" width="100%" height="100%"></div>

Tips & Warnings

• Beware of improperly inputting one section of code, as your web page background image might not stretch if you do.

References

• Quackit: HTML Stretch Background Image