获取背景图像以跨越多个div元素

Question

我正在设计一个基于此模板https://templated.co/linear的网站。定义具有不同背景的内容容器的css如下所示：

#main
{
    position: relative;
    background: #fff;
}

.homepage #content
{
    text-align: center;
}

.homepage #content header h2
{
}

#sidebar h2
{
    display: block;
    padding-bottom: 0.50em;
}

#featured
{
    position: relative;
    background: #f2f2f2;
    text-align: center;
}

#featured h3
{
    display: block;
    font-weight: 300;
}

#featured .pennant
{
    font-size: 4em;
}

#featured .button
{
    margin-top: 1.5em;
}

我有一个带有图案和透明背景的svg文件我希望在这些颜色之上显示，但是不间断地跨越容器。我一直试图在css中定义以下内容的方式：

#spots
{
    background-image: url(../images/spots.svg) !important;
}

然后在html：

    <div id="spots">
        <div id="main">
            Text
        </div>
        <div id="featured">
            More Text
        </div>
    </div>

然而，svg应该放在顶部的容器的背景颜色覆盖了斑点标签的背景图像，尽管有！important标志。我将如何按照上面描述的方式配置模式？