Css Can'；t让Z-index将：：after background放在同一个div的background下。这可能吗？

我目前正在为reddit style（voat）社区编写样式表。为了使背景图像在更大的显示器上显示整个浏览器宽度，而不扭曲原始标题背景，我尝试添加第二个图像，它基本上填充了右侧的其余背景，因此没有剩余的空白

因为我只使用CSS样式表，而不使用任何html，所以我通过使用：：after元素添加了第二个背景。所以我有

#header-container {
    background: url("snip");
    background-color: rgba(0,0,0,0);
    background-size: contain;
    position: absolute;
    height: 175%;
    width: 100%;
    background-repeat: no-repeat;
    top: 25%;
    border-color: #000000;
    z-index: 999;
}

#header-container:after {
    background: url("snip");
    content: "";
    position: absolute;
    background-repeat: repeat-x;
    top: 0%;
    left: 1268px;
    width: 100%; 
    height: 100%;
    border-color: #000000;
    z-index: 1;
    background-size: contain;
}

尽管有z索引，顺序没有改变，在后一部分添加的第二个背景自动覆盖在第一个背景上

有没有不涉及html的方法可以做到这一点。或者是代码中的某些内容完全错误，阻止了它？我还尝试偏移参考底图背景（第二个）以使其从左侧偏移，因此它只覆盖了原始背景（缩小时）缺少的部分，但并不完全准确。我认为这是背景大小的错误：包含行，但不确定

---

对不起，墙，任何帮助都表示感谢

只是猜测，但请尝试将额外的图像样式添加到

：before

伪元素：

#header-container:before {
    background: url("snip");
    content: "";
    position: absolute;
    background-repeat: repeat-x;
    top: 0%;
    left: 1268px;
    width: 100%; 
    height: 100%;
    border-color: #000000;
    background-size: contain;
}

。。。您可能可以取消这两种方法中的

z-index

设置。

您需要这样做吗？