CSS/Html：将背景与div分开

我试图建立一个网页有两个部分，但三个背景

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

第二部分我有个问题。它是内容部分，由“顶部”背景和“主体”背景组成。顶部背景是一个图像，主体背景是另一个图像，重复（平铺）到页面末尾

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

最初，我尝试使用：

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

。。。
... 
...

<>但问题是，我不能把既要涵盖<代码>内容> div和<代码>内容文件 div。如果我在代码中放置了一个更大的组件。内容顶部 div，它将按下<代码>内容体< /代码> div，包括背景，中间留下一个孔。

如何做到这一点

编辑：这里有一把小提琴演示我的问题-

使用“背景图像”

部分{
位置：相对位置；
宽度：100%；
高度：100px；
}
.顶{
背景图像：url（“https://www.newton.ac.uk/files/covers/968361.jpg");
}
.中{
背景图像：url（“http://random-international.com/wp-content/uploads/2012/10/RR-home-img2.jpg");
}
.底部{
背景图像：url（“http://www.chainimage.com/images/random-animals-animals-photo-8676039-fanpop.jpg");
}

---

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

.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;
}

---

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

请您分享小提琴好吗？这不是问题，我知道如何创建3个背景的3个部分。我需要的是用3个背景创建2个部分，以便背景与部分分开。你真的应该编辑你的问题。这是你想要的吗？谢谢不知道你可以有两个背景。