Question

我需要一个带页面内容的居中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%;
}

Answer 1

嗯，这可以做但不会那么漂亮..你将不得不改变你的结构来创建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个部分 - 左侧和右侧，当左侧背景与左侧对齐且右侧背景与右侧对齐时，每个部分都有自己的背景。

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

1 个答案: