Page 1 of 1

DIV Wrapper problem again, background doesn't repeat

Posted: Wed Apr 09, 2008 5:00 am
by Sindarin
I created a wrapper to put my contents inside so they appear in the center. However, I need the page to have a y-repeating background until the bottom of the page. My intended result is this: Image
if I put apDiv1 outside the wrapper, the background shows up, but if I put it inside, it doesn't. I can't find the problem here,

This is my code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<!--Reset Default Styles-->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
 
<!--Active Content Script-->
<script src="files/scripts/AC_RunActiveContent.js" type="text/javascript"></script>
 
<!--StyleSheet-->
<style type="text/css">
#wrapper {
    width: 910px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}
body,td,th {
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
body {
    background-color: #4F4F4F;
    margin-left: 32px;
    margin-top: 0px;
    margin-right: 32px;
}
a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FF9900;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FF9900;
}
a:hover {
    text-decoration: underline;
    color: #FF9900;
}
a:active {
    text-decoration: none;
    color: #FF9900;
}
#apDiv1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 524px;
    height: 100%;
    z-index: 1;
    background-image: url('images/bg.jpg');
    background-repeat: repeat-y;
}
</style>
<!--/StyleSheet-->
</head>
<body>
 
<!--Content Wrapper-->
<div id="wrapper">
 
<!--This is the div for the background-->
<div id="apDiv1">content will go here</div>
 
</div>
 
<!--/Content Wrapper-->
 
</body>
</html>

Re: DIV Wrapper problem again, background doesn't repeat

Posted: Wed Apr 09, 2008 10:45 am
by matthijs
The problem is that the div inside the wrapper is absolutely positioned. Meaning that it is taken out of the flow of the page. So the wrapper div does not expand anymore to fit the inside div.

You could either place the repeating image on the body or even the html elements. Or fill in the wrapper with content not absolutely positioned so that it expands and the background appears

Re: DIV Wrapper problem again, background doesn't repeat

Posted: Wed Apr 09, 2008 10:47 am
by Christopher
Apply the background image to the body.