Page 1 of 1

[solved] CSS: Background image not 100% height

Posted: Sat Feb 16, 2008 3:22 am
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.

Re: CSS: Background image not 100% height

Posted: Sat Feb 16, 2008 1:35 pm
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?

Re: CSS: Background image not 100% height

Posted: Sat Feb 16, 2008 3:14 pm
by pickle
It was happening in Safari, FF, and IE6. However, unbeknownst to me, adding "height:auto !important" fixed it for all browsers.

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

Posted: Sat Feb 16, 2008 4:13 pm
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.