DIV Wrapper problem again, background doesn't repeat
Posted: Wed Apr 09, 2008 5:00 am
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:
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:
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>