如何对齐页面两侧的背景？

我需要在页面左侧和右侧分别对齐页面内容和重复背景，以获得居中的div： What it looks like now 。在左侧的箭头模式应该从哪里开始页面的左侧结束，重复到屏幕左侧的结束，并在右侧的同样的事情。在右侧它正确对齐，但这是巧合。目前的代码是：this fiddle 如何对齐页面两侧的背景？

HTML：

<body> 
    <div class="container"> 
     <div class="content"> 
      <p> 
       Lorem ipsum dolor sit amet 
      </p> 
     </div> 
    </div> 
</body>

CSS：

* { 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-image: url('http://i.imgur.com/mcX3gBy.png'); 
    background-attachment: fixed; 
} 
.container { 
    min-height: 100%; 
} 
.content { 
    margin: 0 auto; 
    width: 150px; 
    background-color: #fff; 
    min-height:100%; 
}

来源

2013-07-27 maciejjo

好了，这是可以做到但它不会是那个漂亮的..你必须改变你的结构创建2部分背景（即使css3的多重背景在这种情况下也无济于事）。

Here the working jsFiddle

我里面.container增加了以下内容：

<div class="leftBG"></div> 
<div class="rightBG"></div>

，并添加CSS：

.leftBG{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:50%; 
    height:100%; 
    z-index:1; 
    background:url('http://i.imgur.com/mcX3gBy.png') top right repeat; 
} 

.rightBG{ 
    position:absolute; 
    top:0px; 
    left:auto; 
    right:0px; 
    width:50%; 
    height:100%; 
    z-index:1; 
    background:url('http://i.imgur.com/mcX3gBy.png') top left repeat; 
}

这里做的事情基本上是除以2份背景 - 左，右，每一个都有它当左背景左对齐和对齐权背景自己的背景。

来源

2013-07-27 09:20:44

背景仍然没有启动，在中间块结束时，它应该看起来像[this]（http://i.imgur.com/VNczttR.png）也许左右div不应该在中间，而是在中心div？ – maciejjo

是的，但它没有对齐中心div的一面...第1背景块应该开始向右其中中间块结束，而不是它背后 – maciejjo

我想用正确的解决方案，并留下的div是正确的，但他们应该结束对中央块的两侧，我只是不知道该怎么做。 – maciejjo

如何对齐页面两侧的背景？

回答

相关问题