DIV Wrapper problem again, background doesn't repeat

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

DIV Wrapper problem again, background doesn't repeat

Post 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>
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

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

Post 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
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

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

Post by Christopher »

Apply the background image to the body.
(#10850)
Post Reply