如何使2个背景“粘在”居中的div的侧面

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

我还创建了一个小提琴： http : //jsfiddle.net/feitla/YSAsj/

是否有人知道如何将背景固定在居中的div上并且也可以像在屏幕截图中那样在div的下面移动而不进行重新调整的解决方案？

多谢！

Answer 1

查看您的屏幕快照，您似乎希望平铺在各处的叶子背景都可以容纳在白色容器下面，该容器应该是灰色的。 您可以使用叶子设计平铺主容器，而不仅仅是在其下面盖上包含纯灰色背景的<div> 。

在这里提琴-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

最简单的方法是将背景作为重复的背景放置在主体上，即在主体上，或者在内部包含另一个div的100％宽度的容器中。

像这样...

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

并让您的CSS作为背景...

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

这涉及到编辑图像，使其看起来像重复的图像。...

Answer 3

HTML代码：

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

CSS代码：

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

您应该将marign和padding值分配给主类以使div居中。 您可以在这些代码中添加其他代码。