css - 如何在居中的 div 的两侧制作 2 个背景 "stick"

Question

所以我有 2 个背景需要“粘贴”到居中的 div 的两侧。无论浏览器设置的宽度如何，div 本身都应位于页面中央。

我现在遇到的问题是...背景，由于 % 在调整浏览器的宽度时在居中的容器 div 下方移动。它们保持在我给它们的百分比，但如果我不给它们百分比和绝对位置...背景将不会粘在 div 的一侧。

我想要完成的是让此快照中的叶子背景根据浏览器的宽度进行相应调整:http://grab.by/odcy在此屏幕截图中，我将宽度调整得更小并且 div 发生了变化，但背景仍然保持在我给它们的 %。你得到了我不想要的这种重叠效果。

/** 编辑 **/

居中的 div 下面不应该有任何背景，请注意底部是灰色的。

我想确保第一片叶子的最右边和第二片叶子的最左边总是与居中的 div 齐平，而不是因为重新调整而被切断。就像在这个屏幕上... http://grab.by/odlC

/** 结束编辑**/

这是我简化的 html:

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

这是我简化的 CSS:

#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 */
}

我还创建了一个 fiddle :http://jsfiddle.net/feitla/YSAsj/

有谁知道如何使背景贴在居中的 div 上并重新调整而不像屏幕截图中那样在 div 下方移动的解决方案？

非常感谢!

Answer 1

查看您的屏幕截图，您似乎希望将叶子背景平铺在白色容器下方的各处，而白色容器应该只是灰色。你可以用叶子设计平铺主容器，而不仅仅是用 <div> 覆盖在下面包含纯灰色背景。

在这里 fiddle - 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 */
}