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 { }
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 { }