Repeating vertical background image and a sticky footer

[sircastor]

Hi Guys,

I’ve been pulling my hair about about this one over the last few days, and inspite of my best searches, I haven’t been able to figure it out.

I’m working on a site where I have content in a block that’s auto-margin’d in the center. The block has drop shadows on either side. I’m accomplishing this with an image that repeats down the length of the block.

At the bottom, there’s a footer. This footer should be sticky so that if there’s little content, it’ll be at the bottom. I’m running into an issue where the content is too little that it won’t stretch the image (repeating down to the bottom of the page).

Does anyone have a solution for this?
Here’s an image to explain what’s going on. You can see a gap that’s created by the distance between content and no content (everything but the background has been removed for clarity.)

[Arkitekt]

You are gonna have to post some code…

[sircastor]

Yeah, I should have done that in the first post…
Here’s the html:

Here’s the css (It’s mostly lifted from this page)

* {margin:0;padding:0;}



html, body {height: 100%;}



body{

background: url("images/background_red_stripe.png") no-repeat;

background-position:center top;

overflow:auto;

}



/*Opera Fix*/

body:before {

content:"";

height:100%;

float:left;

width:0;

margin-top:-32767px;/

}



#wrap {

min-height: 100%;

}



#main {

overflow:auto;

padding-bottom: 150px; /* must be same height as the footer */

width:988px;

margin:0 auto;

background: url('images/main_page_white_drop_shadow.png') repeat-y 0 0px;

}



#footer {

position: relative;

margin-top: -150px; /* negative value of footer height */

height: 150px;

clear:both;



}



#footerContent{

width:988px;

margin:0 auto;

background: url('images/main_page_white_drop_shadow.png') repeat-y 0 0px;

height:100%;

}





#side{

padding-left:24px;

float:left;

}



.sidebarBox{

margin-bottom:15px;

}



.sidebarBox a{

border:none;

}

Any thoughts or ideas?

[timmey]

mean something like this?
http://jsfiddle.net/bRm26/

[sircastor]

That’s very close to what I’m looking for timmey! Unfortunately I need to be able to support older browsers that don’t work with css’ shadow property.

Any other ideas?

[timmey]

well instead of box-shadow just set ur background image like u already did

background: url('images/main_page_white_drop_shadow.png') repeat-y 0 0px;

[sircastor]

For anyone who comes across this, and needs help, I did eventually figure it out. It turned out to be be a matter of getting the repeating image on the right element. For this project, it was “wrap”. The footer has behaved and the background image repeated properly all the way down. This was a big relief to me.

Anyone interested can look at the site.

Thanks, I greatly appreciate it.

[Author]

Posts