CSS / Html：与div分开的背景

Question

我正在尝试构建一个包含两个部分但三个背景的网页。

第一部分是页眉，具有自己的背景。

第二部分我有问题。它是内容部分，由一个＆＃34; top＆＃34;背景和身体＆＃34;背景。顶部背景是单个图像，正文背景是另一个图像，重复自己（平铺）到页面的末尾。

问题在于顶部和身体之间的划分，仅用于背景。内容是连续的，相同的图像从顶部开始，一直延伸到身体部位。

最初，我尝试使用：

<div class="header">...</div>
<div class="content-top">...</div> 
<div class="content-body">...</div>

但问题是，我无法放置跨越.content-top div和.content-body div的内容。如果我在.content-top div中放置一个更大的组件，它会向下推.content-body div，包括背景，在中间留下一个洞。

如何做到这一点？

修改：这是一个演示我的问题的小提琴 - https://jsfiddle.net/nj13ktms/6/

Answer 1

您可以在同一个容器中使用两个背景：

.content-top {
  text-align: center;
  background: url(http://i.imgur.com/VcvKC2F.jpg) no-repeat center top, url(http://i.imgur.com/FLEHfrY.jpg) repeat-y center;
  background-size: 100% auto;
}

https://jsfiddle.net/x3nqry4x/

（注意：我删除了第二个DIV并将其内容放入第一个DIV中）

Answer 2

使用＆＃39; background-image＆＃39;

＆＃13;

＆＃13;

binding

＆＃13;

.section  {
position:relative;
width:100%;
height:100px;
}

.top {
background-image: url("https://www.newton.ac.uk/files/covers/968361.jpg");
}

.middle {
background-image: url("http://random-international.com/wp-content/uploads/2012/10/RR-home-img2.jpg");
}

.bottom {
background-image: url("http://www.chainimage.com/images/random-animals-animals-photo-8676039-fanpop.jpg");
}

＆＃13;

＆＃13;

＆＃13;