Forums > SideBar Image Repeat

Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics

FallintoMusic

Oct 7 2009, 10:31 AM

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

Oct 7 2009, 02:44 PM

is this fluid css or divs?

allvanishing

Oct 7 2009, 04:03 PM

Short answer: You can't with CSS. But you can use a repeating background image to simulate it.

newkidontheblock

Oct 7 2009, 07:02 PM

You can take a look at this tutorial Equal Height Columns with Cross-Browser CSS and No Hacks, it very simple.

FallintoMusic

Oct 13 2009, 05:55 PM

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

Oct 15 2009, 10:59 AM

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.