如何在所有其他内容后面显示固定背景图像

Question

我正在尝试添加一个固定的背景图片并在另一个 div 的正常文本内容后面显示。图像需要固定，以便页面的其余内容可以滚动并保持完整图像可见。背景图像需要放在单独的 div 中（这就是 HTML 当前的结构，我无法更改它）。
由于某种未知原因，背景图像一直覆盖所有内容。如何让它显示在内容后面？

旁注：

我已经加载了 Bootstrap 5.0.1，但是 Bootstrap 并不是这里的错误。
我试过 z-index 但没有成功。

代码片段：

#backgroundImage {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
image-orientation: from-image;
background-image: url(https://i.imgur.com/AD3MbBi.jpeg);
background-repeat: no-repeat;
background-position: left;
background-size: contain;
}

<div class="container-fluid">
<div class="container">
    <div id="backgroundImage"></div>
    <div class="buttons text-right">
        <button class="btn btn-sm btn-primary">some button</button>
    </div>
</div>
<div class="row p-2 ontop">
    <p>asdasdasdads sdfsfsdfsd fsdfsd fsd</p>
    <p>fsdfdsf ssdf sdfsd fwefwefwe ewefwewe</p>
    <p>fsdfdsf ergerger gerg ergwrwewe</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
</div>
</div>

原文fiddle：https://jsfiddle.net/6bytes/vsrawpu8/27/

Answer 1

我认为这是因为您的 img 容器在父容器中 div（并且 z-index 不起作用）。如果你想把它放在你的文本后面，试着把它放在 DOM 中的相同级别或更高级别，然后使用 z-index。

Answer 2

这样做

#backgroundImage {
            
            background-image: url(https://i.imgur.com/AD3MbBi.jpeg);
            background-repeat: no-repeat;
            background-size: contain;
            background-attachment: fixed;
        }


 <div id="backgroundImage">
       ...All you content
    </div>

Answer 3

如果您的文本元素具有更高的 z-index，您可以在您的元素上放置一个固定位置的负 z-index，它会起作用。

MDN: z-index CSS 属性设置z- positioned 元素及其后代或弹性项目的顺序。具有较大 z-index 的重叠元素会覆盖具有较小 z-index 的元素。

#backgroundImage {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
image-orientation: from-image;
background-image: url(https://i.imgur.com/AD3MbBi.jpeg);
background-repeat: no-repeat;
background-position: left;
background-size: contain;
z-index: -1;
}

.row {
  color: white;
}

<div class="container-fluid">
<div class="container">
    <div id="backgroundImage"></div>
    <div class="buttons text-right">
        <button class="btn btn-sm btn-primary">some button</button>
    </div>
</div>
<div class="row p-2 ontop">
    <p>asdasdasdads sdfsfsdfsd fsdfsd fsd</p>
    <p>fsdfdsf ssdf sdfsd fwefwefwe ewefwewe</p>
    <p>fsdfdsf ergerger gerg ergwrwewe</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
    <p>fsdfdsfw efwefwe fwefwe fweewwefwefwef</p>
</div>
</div>

如何在所有其他内容后面显示固定背景图像

How to display fixed background image behind all other content

html

css

background

twitter-bootstrap