Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    backgrounds to "stretch" to fill page

    I grabbed this code from somewhere in order to get a "background" image to stretch to fit the whole page, with it's proportions changing to fit each user's different screen resolutions/window sizes.
    Since backgrounds actually can't be made to stretch, this has been done by having an image stretched in one div, and the page contents in another div, but they're on a different z-axis. (so it's not strictly speaking, a "background")
    Problem is, this code stretches the image to "fit to SCREEN", not the whole PAGE (meaning if I scrolled down, there's no background there).

    How do I get the div and image to fill the page from top to bottom?

    BTW, if it helps, my image is actually like a gradient that goes dark on both left/right edges, and light in the middle. 1px high.

    Code:
    <head>
    <title>How to stretch a background image.</title>
    <style type="text/css">
    body {margin:0px;}
    #bg_image {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
    }
    #contents {
    z-index: 1;
    position: absolute;
    }
    </style>
    </head>
    
    <body>
    
    <!-- this creates the background image -->
    <div id="bg_image">
    <img src="images/scenery.jpg" style="width: 100%; height: 100%;">
    </div>
    
    <!-- this puts the contents of the page ontop of the background image -->
    <div id="contents">
    This is a test.
    </div>
    
    </body>

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    if your open to browser scripting, then i'm sure there's a very simple solution using javascript, so i'd post this in js's forum

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion, but so many have javascript disabled, so if there's another way...
    Maybe if I could just get the first div to extend to the bottom of the page, not just 100% of the screen. Or somehow get the image to do that, instead of also 100% of the screen.
    The only half solution I've had is making the height something huge like 1000%, or 3000px or somthing, but obviously, that leaves the background going on for ages after the contents finishes! Looks tacky.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by naushikaa View Post
    Thanks for the suggestion, but so many have javascript disabled, so if there's another way...
    Maybe if I could just get the first div to extend to the bottom of the page, not just 100% of the screen. Or somehow get the image to do that, instead of also 100% of the screen.
    The only half solution I've had is making the height something huge like 1000%, or 3000px or somthing, but obviously, that leaves the background going on for ages after the contents finishes! Looks tacky.
    If you followed up on other threads you started on other forums you would have had this same answer yesterday. http://www.cssplay.co.uk/layouts/background.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •