HTML/CSS 图像分隔符/分隔符叠加/方法？

Question

我已经弄乱了 CSS 示例和 HTML，足以创建一个时尚的(在我看来)网站。我有两个 CSS(部分)的背景图像，它们都调用我的 styles.css 文件中的元素将它们的背景着色为黑色和白色。但是，我想在这两个部分之间有一个图像分隔符。

我看了类似的文章 Using an image as a separator in HTML and CSS 这对我没有帮助。

我已经尝试了 <> 方法但没有产生任何结果，我尝试了 “分区类” 方法，我的形象出现了!但是，它被我的其他两个背景/部分覆盖/覆盖了。

如何放置我的图像，使其恰好位于我的两个部分的背景颜色分离的中间，我如何制作它以覆盖我的两个部分/背景？

让我用 ASCII 艺术画出我想要的样子..

WWWWWWWWWWW <-- 白色背景/CSS 部分

WWWWWWWWWWW

OOOOOOOOOOO <-- 分隔图像，smack center，覆盖两者

BBBBBBBBBB

BBBBBBBBBB <-- 黑色背景/CSS 部分

谢谢，如果我需要进一步澄清我的问题，我很乐意!

这是我的 styles.css 代码

.Halloweeny {
        height:100px;
        width: 100 % ;
        background: url('/images/halloween.png');
        background-position: 50% 50%;
        z-index: 99;
}

这是我的 index.php 中的代码

....

</section>

<div class="Halloweeny"></div>

        <!-- Image section -->
        <section class="image-section red" id="image-section">

.....

如您所见，它位于两个部分之间。

Answer 1

这必须有效:

.Halloweeny{ 
         height:100px;
         width: 100 % ;
         background: url('/images/halloween.png') no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
    }