**In a nutshell**

I need a CSS solution for the following requirements:

* Two vertically repeated background images, one aligned to the left, one aligned to the right
* One centered column on top with fixed width and a minimum height of 100%
* 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 (replaces the current body background image). 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:

```css
#main_container {
    background-color: white;
    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:

```css
html {
    height: 100%;
}

body {
    background-image: url('old-background.png');
    margin: 0;
    height: 100%;
    padding: 0;
}

```

So far so good - until the new body background image with gradients arrived. I tried the following solutions

1. Two absolute positioned divs behind the main container
2. One image defined with the body, one with the html CSS class
3. 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