CSS dynamically repeat nested background div, possible?

Question

Hi, there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!

Answer 1

Edit: Sorry, you are trying to stretch the background image.

The technique is to remove the float:right; style and add a margin to the left:

#main_body {
  float: right; //remove this
  margin-left: 320px; //add this
}

-works on Chrome

Answer 2

There are solutions described. You can use pure css to do it or even use javascript. I am considering that you are only requiring a css solution. Try the following CSS.

body { 
margin:0; 
padding:0; 
height:100%; 
}

or

html{
width:100%;
height:100%;
}

or check out this link, a better solution. Click here