Help with background image in div tag

[gtcway]

I'm still very new to css. I"m working with Dreamweaver and usually do a google search to find answers to problems that I run into.
I have a site that I'm trying to convert to css with divs and get rid of tables. What I'm working on now is basically a template with backgound images and everything that will be in every page on the site. The parent div is a set width that is centered on the page with a height of 100% to expand as needed. Within the parent I have four divs from top to bottom all centered within the parent. The main content div I have set to auto height to expand as needed when content is added.
The parent div has a background image that is set to tile vertically. The problem I'm having is the tiled image stops at the bottom of the visible window of the browser. If there is enough content to require scrolling down, the background image doesn't continue down to fill the page.

[gtcway]

Here is the css


html, body {
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}

a:link {
color: #000000;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #666666;
}

a:hover {
text-decoration: underline;
color: #000000;
}

a:active {
text-decoration: none;
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #FFFFFF;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
}

h3 {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}

h4 {
}

p {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.3em;
text-align: justify;
margin-left: 30px;
margin-right: 30px;
}

#background {
width: 955px;
position: relative;
background-image: url(../images/pagebackground.gif);
background-repeat: repeat-y;
z-index: auto;
margin-right: auto;
margin-left: auto;
height: 100%;
left: auto;
right: auto;
}

#head {
position:relative;
width:620px;
height:auto;
z-index:auto;
text-align: center;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 35px;
}

#navigation {
position:relative;
width:620px;
height:32px;
z-index:auto;
text-align: center;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 25px;
}

#footer {
position:relative;
width:400px;
height:60px;
z-index:auto;
text-align: center;
font-size: 12px;
margin-right: auto;
margin-left: auto;
padding-top: 50px;
padding-bottom: 20px;
}

#index_rendering {
position:absolute;
left:132px;
top:173px;
width:690px;
height:301px;
z-index:1;
text-align: center;
}

#content {
position:relative;
width:700px;
height:auto;
z-index:102;
background-image: url(../images/box_middle.gif);
background-repeat: repeat-y;
text-align: center;
margin-right: auto;
margin-left: auto;
}

#content img {
padding-bottom: 0px;
}

#background #content #topimage {
background-position: center;
margin-bottom: 12px;
}

#background #content #map {
padding-right: 20px;
padding-left: 20px;
padding-top: 25px;
padding-bottom: 10px;
}

[rangana]

Hi gtcway,
Is your page live?!..Could we have the link through it??
Your problem is basically regarding the image background, the fix would be lot easier if we could see how the image is being rendered

[gtcway]

I got some help and it's working how I want it to in IE7 and Firefox.

I don't have it live yet. What was happening is the parent div is 955px wide and I'm using an image 955x10px tiling vertically. When opened in a browser the image would tile to the bottom of the visible page before scrolling. All of the page that required scrolling down to view was blank, the image didn't tile to the bottom of the whole page.

[rangana]

Glad to know you have found the fix