Question:

How Do you Stretch a Background Image in a Web Page in html??

by  |  earlier

0 LIKES UnLike

How Do you Stretch a Background Image in a Web Page in html??

 Tags:

   Report
Answer The Question I've Same Question Too

2 ANSWERS

Sort By: Date  |  Rating

  1. You can do that with CSS:

    CSS 3 (might not be compatible with all browsers):

    http://webdesign.about.com/od/css3/f/blf...


  2. <html>

    <head>

    <style type="text/css">

    /* set to fill out to viewport's frame */

    body {

    margin: 0;

    }

    /* container for stretchable background image */

    #bgImg {

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 0;

    }

    /* make image fill container */

    #bgImg img {

    height: 100%;

    width: 100%;

    }

    /* container for everything else in the page */

    #page {

    color: red;

    position: absolute;

    z-index: 1;

    }

    </style>

    </head>

    <body>

    <!-- put the background-image container into the page -->

    <div id="bgImg"><img src="your_background.jpg" /></div>

    <!--

    put all the rest of the page's content into the next div -

    it will be "above" (higher z-index) the background

    -->

    <div id="page">

    <h2>some content for the page</h2>

    </div>

    </body>

    </html>
You're reading: How Do you Stretch a Background Image in a Web Page in html??

Question Stats

Latest activity: earlier.
This question has 2 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.
Register Now
Unanswered Questions