如何对齐页面两侧的背景？
我需要一个带有页面内容的居中div,以及在页面左侧和右侧单独对齐的重复背景: 
.在左侧,箭头图案应从页面左侧结束的位置开始,并重复到屏幕左侧的末尾,右侧则相同.在右侧,它正确对齐,但这是巧合.目前的代码是:这个小提琴
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%;
}
好吧,这可以做但不会那么漂亮..你必须改变你的结构来创建2个部分的背景(即使css3的多个背景在这种情况下也无济于事).
我在里面添加.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个部分 - 左侧和右侧,当左侧背景与左侧对齐且右侧背景与右侧对齐时,每个部分都有自己的背景.