CSS challenge: Two background images, centered column with fixed with, min-height 100%
- by laurent
In a nutshell
I need a CSS solution for the following requirements:
Layout: One centered column with fixed width and a minimum height of 100%
Two vertically repeated background images behind the centered column, one aligned to the left, one aligned to the right
Cross browser compatibility
A little more details
Today a new requirement for my current web site project came up: A background image with gradients on the left and right side. The challenge is now to specify two different background images while keeping the rest of the layout spec. Unfortunately the (simple) layout somehow doesn't go with the two backgrounds.
My layout is basically one centered column with fixed width:
#main_container {
margin: 0 auto;
min-height: 100%;
width: 800px;
}
Furthermore it's necessary to stretch the column to a minimum height of 100%, since there are quite some pages with only little content. The following CSS styles take care of that:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
padding: 0;
}
So far so good - until the two background image issue arrived... I tried the following solutions
Two absolute positioned divs behind the main container
One image defined with the body, one with the html CSS class
One image defined with the body, the other one with a large div begind the main container
With either one of them, the dynamic height solution was ruined. Either the main container didn't stretch to 100% when it was too small, or the background remained at 100% when the content was actually longer
