两侧（左侧和右侧）的图像背景？

Question

我很难在页面的两侧获得背景信息：

风格

.left {
   background: url(wax.png);
   width: 15%;
   position: absolute;
   left: 0px;
   height: 100%;
}
.right {
   background: url(wax.png);
   width: 15%;
   position: absolute;
   right: 0px;
   height: 100%;
}

.middle{
    margin: 0 auto;
}

HTML

<div class="left">

</div>

<div class="middle">
</div>

<div class="right">

</div>

结果

它接近我想要实现的目标，但正确的图像是错误的。

背景也不会垂直重复

Answer 1

 background: url(wax.png) repeat-y 0 0;

要获得顶点重复。

你有相对的定位吗？除非你有其他相对的东西，否则那个输入文本字段可能会向下推右边的div？

如果您要使用position：absolute，请将其全部包装并在包装div上使用position：relative。

否则，您可以使用body标签甚至是html标签，但最好使用包装容器。

Answer 2

我不确定你要做什么它看起来对齐我，但重复图像是这个背景：url（wax.png）; background-repeat：no-repeat

Answer 3

  

它接近我想要实现的目标，但正确的形象是   错位的。

将top:0添加到.right类

  

背景也不会垂直重复

正如其他人所提到的，在背景属性值中添加repeat-y

background: url(wax.png) repeat-y

Answer 4

也许你只想把你的中间放在一个div中，背景在两个方向重复，中间有背景白色

HTML：

<div id="background">
  <div id="content">
    this was middle
  </div>
</div>

的CSS：

#content{
  margin: 15%;
  background: white;
}

#background {
  background: url(wax.png);
}