Attatch background image to bottom of sizechanging divs

I have defined a number of divs, which have partly transparent backgrounds wich are overlapping each others, I want to attatch one of them to to bottom of the div. However, if I add content to the divs, the background is attatched where I had specified the min-height. This occurs in all Browsers except IE. This is my code:

#content1 {
    background-image: url(image/main_background.png);
    margin-left: 12px;
    margin-right: 12px;
    /*margin-top: 0px;
    margin-bottom: 0px;*/开发者_StackOverflow
    border-style: solid;
    border-left-width: 3px;
    border-right-width: 3px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-color: #000000;
    width: 976px;
    min-height: 355px;
    float: left;    
    }
#content2 {
    background-image: url(image/top_gradient.png);
    background-repeat: repeat-x;
    width: 976px;
    min-height: 355px;
    }
#content3 {
    background-image: url(image/bottom_gradient.png);
    background-repeat: repeat-x;
    background-position: 0% 100%;
    width: 976px;
    min-height: 355px;
    }
#content4 {
    background-image: url(image/top_background.png);
    background-repeat: no-repeat;
    width: 976px;
    min-height: 355px;
    clear: both;
    }

and

<div class="container">
    <div id="content1"><div id="content2"><div id="content3"><div id="content4">
        <div id="content_elements">
            <::content::>
        </div>
        <div id="sidebar_elements">
            <::sidebar::>
        </div>
    </div></div></div></div>
</div>

Thank you!

Does this works: background: url('background.png') no-repeat bottom; so add bottom after no-repeat.