www.webdeveloper.com
Results 1 to 4 of 4

Thread: [HTML / CSS] Not so 100%.

  1. #1
    Join Date
    Feb 2010
    Posts
    4

    [HTML / CSS] Not so 100%.

    SO I'm working on a website and want a backdrop that stretches 100%.

    I have looked all over for a code to do so, and have successfully found one that stretches 100%... Of the screen size, and then stops.

    What do I mean?

    Simply put, if my screen is 1024px high... The code will stretch that element to 1024px and then stop. So if the page ends up scrolling, the background will stretch to the bottom of the first page, but as you scroll into the second page, you lose the backdrop.

    Here's what I'm using for HTML:

    HTML Code:
    <div id="backdrop">
    <div id="content" align="center">
    <br>
    <img src="img/IGNiTE.png" width="171" height="127" alt="IGNiTE Homepage">
    <br>
    <div id="nav">
    
    
    
    </div>
    
    <div id="middle">
    
    If this content box extends into a second page, the backdrop ends at the end of page 1!
    
    </div>
    
    </div>
    </div>
    And CSS:
    Code:
    html, body {
    	min-height: 100%;
    	height: 100%;
    }
    html {
    	background: url(img/bg.png) fixed;
    	width: 850px;
    	margin: 0 auto;
    }
    
    body {
    	width: 850px;
    	margin: 0 auto;
    }
    
    div#backdrop {
    	background: #2c0000 fixed;
    	width: 850px;
    	margin: 0 auto;
    	height: 100%;
    }
    div#content {
    	background: #000 fixed;
    	width: 830px;
    	height: 100%;
    	margin: 0 auto;
    	overflow: visible;
    }
    #nav {
    	background: url(img/nav.png);
    	width: 792px;
    	height: 35px;
    }
    #middle {
    	background-color: #111111;
    	border: 2px solid #666;
    	width: 800px;
    	margin-top: 10px;
    	margin-bottom: 10px;
    }
    
    .split {
    	margin-top: 5px;
    }
    .nav {
    	margin-top: 5px;
    }
    Any ideas?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,147
    Take a look at the 'background-size' property, particularly the settings 'cover' and 'contain'.

  3. #3
    Join Date
    Feb 2010
    Posts
    4
    Quote Originally Posted by rtrethewey View Post
    Take a look at the 'background-size' property, particularly the settings 'cover' and 'contain'.
    I tried applying both these settings, and considering the situation, expected cover to work, but it still remained the same, regardless of what I set it to. Any ideas?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,147
    I'd need to see the entire page. Maybe you have a missing or improper <!DOCTYPE>. Maybe you have some invalid code that is outside the portions you posted. It's impossible to say what the problem might be.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles