How to make 2 backgrounds “stick” to the sides of a centered div

Question

So I have 2 backgrounds that I need to make "stick" to the sides of a centered div. The div itself should be centered on the page regardless of the width the browser is set at.

The problem I have now is... the backgrounds, due to % are shifting underneath the centered container div when the browser's width is adjusted. They stay at the percentage I give them, but if I don't give them the percentage and absolute positions... the backgrounds won't stick to the side of the div.

What I am trying to accomplish is to have the leaf backgrounds in this snapshot to adjust accordingly to the width of the browser: http://grab.by/odcy in this screenshot, I adjusted the width smaller and the div shifts but the backgrounds still stay at the %'s I gave them. You get this overlapping effect that I don't want.

/ ** EDIT ** /

The centered div should not have any background underneath, please notice that is gray at the bottom.

I want to make sure that the far right of the first leaf and the far left of the 2nd leaf is always flush up against the centered div and not cut off due to readjustment. Like in this screen cap... http://grab.by/odlC

/ ** END EDIT ** /

Here is my html simplified:

<div id="bg1"></div>
<div class="container"></div>   
<div id="bg2"></div>

Here is my CSS simplified:

#bg1 {
    float:right;
    position:absolute;
    background:gray;
    height: 100%;
    width: 100%;
    right: 77%;
    top: 100px;
    margin-right:2px;
}
#bg2 {
    float:left;
    position:absolute;
    background:#ccc;
    height: 100%;
    width: 100%;
    left: 25%;
    top: 100px;
    margin-left: 325px;
    overflow-x:hidden;
}

.container {
    margin:0 auto;
    width:260px;
    height:500px; /*for demo only */
}

I created a fiddle as well of this: http://jsfiddle.net/feitla/YSAsj/

Does anybody know the solution of how to make the backgrounds stick to the centered div and also readjust without shifting underneath the div like it is in the screenshot?

Much obliged!

Answer 1

Looking at your screenshot, it appears you want the leaf background tiled everywhere accept for underneath the white container, which should just be grey. You could tile the main container with the leaf design, and than just cover underneath with a <div> that contains a solid grey background.

Fiddle here - http://jsfiddle.net/FgU6R/2/

HTML

<div id="leaf-bg">
    <div id="grey-bg">
        <div class="container">
        </div>  
    </div>
</div>

CSS

#leaf-bg
{
    background: url('http://s22.postimg.org/l1o86vn6l/leaf_sample.gif') repeat;
    width: 100%;
    height: 100%;
}
#grey-bg
{
    margin:0 auto;
    position: relative;
    background-color: #d2d1d1;
    width:330px;
    height: 500px;
}
.container 
{
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #AAAAAA;
    width:330px;
    height:300px; /*for demo only */
}

Answer 2

The easiest way would be to put that background onthe body as a repeating backdrop, that is either on the body, or a 100% width container that contains the other div inside it.

Like so....

<div id="backdrop"><div id="container"></div></div>

And have your css for the backdrop be...

#backdrop {
 Background: url(../yourimage.png) repeat-y;
 Width:100%;
 }

This involves editing your image so that it looks good as a repeated image....

Answer 3

HTML code:

<div class="main">
<div id="bg1"></div>
<div id="bg2"></div>
</div>

CSS code:

.main {
width: xx px;
height: xx px;
}
#bg1 {
width: 50%;
height: 100%;
}
#bg2 {
width: 50%;
height: 100%;
}

You should assign marign and padding values to a main class for centering div. You can add other codes to these codes.