Help - Search - Members - Calendar
Full Version: SideBar Image Repeat
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
FallintoMusic
How do I get my sidebar image repeat (no matter how much content it has) so that it goes all the way to the footer? I'm going crazy trying to figure it out. This is what the layout looks like:

synapse
is this fluid css or divs?
allvanishing
Short answer: You can't with CSS. But you can use a repeating background image to simulate it.
newkidontheblock
You can take a look at this tutorial Equal Height Columns with Cross-Browser CSS and No Hacks, it very simple.
FallintoMusic
Thanks; it was CSS. I tried using that but the same problem occurs..the side bar still won't repeat:

CODE
.container {
float: left;
overflow: hidden;
width: 100%;
margin: 0 auto;
}

#content {
background: url(images/content.gif) repeat-y;
float: left;
width: 65%;
margin-top: 32px;
padding-left: 15px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 30px;
min-height:100%;
}

#sidebar {
background: url(images/sidebar.gif) repeat-y;
width: 10%;
min-height: 100%;
margin-top: 32px;
margin-left: -228px;
padding-left: 15px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 30px;
float: left;


}
porninvader
Background-repeat will based on the height of its parent. Try to pud a height on it
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.