[solved] CSS: Background image not 100% height

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

[solved] CSS: Background image not 100% height

Post by pickle »

Hi all,

I've got a <div> that wraps all my page content. I've set it to be 100% height & that works just fine. Like you'd expect, it grows to contain it's children, even when they go beyond the viewport. However, the background image I've assigned to that <div> doesn't go beyond the viewport. Any clues?

Here's some example XHTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">    <head>        <title>            Test        </title>        <link rel = "stylesheet" type = "text/css" href = "style.css" />        <link rel = "stylesheet" type = "text/css" href = "nav.css" />    </head>    <body>        <div class = "site-wrapper">            <div style = "height:1000px;">                biiiig            </div>        </div>    </body></html>
And the relevant CSS:

Code: Select all

html,body{    font-size:9pt;    padding:0;    margin:0;    height:100%;    min-height:100%;    }.site-wrapper{    width:776px;    margin:auto;    background-image:url(site-shadow.png);    background-position:top center;    background-repeat:repeat-y;    height:100%;    min-height:100%;}
I read somewhere that setting "background-attachment" to "fixed" might fix it, but it didn't.

Thanks.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: CSS: Background image not 100% height

Post by Christopher »

I think background-attachment is just for scrolling, but you could try it. I think it might be the margin:auto but it is hard to tell. Is it in IE6, IE7, Firefox?
(#10850)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS: Background image not 100% height

Post by pickle »

It was happening in Safari, FF, and IE6. However, unbeknownst to me, adding "height:auto !important" fixed it for all browsers.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: [solved] CSS: Background image not 100% height

Post by Christopher »

Cool. I have never seen !important before. According to the !important will cause a setting take precedence over other settings that may have similar effects. Good find.
(#10850)
Post Reply