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>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%;}Thanks.