Make A Web Page Background Image Stretch

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.


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

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:

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:

READ  Silverlight 3d Carousel Effect Tutorial