Background image not repeating properly

liunx

Guest
Hello all - I am currently having a problem with a background image not being repeated properly.

There are two images that need to be repeated, div#topbg and div#leftbg. Topbg is being repeated-x correctly, but I am having problem with Leftbg being repeated-y.

The Leftbg will repeat vertically but stops repeating until it reaches the end of the background image of div#wrapper.

Could someone provide a solution to this? I need it to repeat all the way down the page! Here is the code for those that know of a simple solution. For those that need to look a bit more into it I have included a zip file as attachment to show just exactly what is wrong.. Please help!

The CSS code:

html, body
{

height: 100%;

}

body
{
margin: 0px;
padding: 0px;
font : 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;

}

div#topbg
{
width: 100%;
height: 145px;
background : url(../images/top-bg.gif) repeat-x top left;
}

div#leftbg
{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
background : url(../images/left-bg.gif) repeat-y;
}

div#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 758px;
height: 100%;
margin: 0px;
padding: 0px;
background: url(../images/bg.jpg) no-repeat top left;
}

div#container
{

padding: 145px 0px 0px 125px;

}

div#content

{
width: 100%;
margin: 0px;
padding: 0px;
float: left;
}


The HTML code:

<body>
<div id="topbg"></div>
<div id="leftbg"></div>
<div id="wrapper">

<div id="container">

<div id="text">content</div>
</div>
</div>put it in the body { }
 
Back
Top