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

【问题标题】：How to display fixed background image behind all other content如何在所有其他内容后面显示固定的背景图像
【发布时间】：2021-05-16 16:12:57
【问题描述】：

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

旁注：

我已经加载了 Bootstrap 5.0.1，但 Bootstrap 在这里没有问题。
我尝试使用z-index，但没有成功。

代码sn-p：

#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>

原小提琴：https://jsfiddle.net/6bytes/vsrawpu8/27/

【问题讨论】：

标签： html css twitter-bootstrap background

【解决方案1】：

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

MDN： z-index CSS 属性设置定位元素及其后代或弹性项目的 z 顺序.具有较大 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>

【讨论】：

【解决方案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>

【讨论】：

感谢您的建议，但我不能像那样重做 HTML。我必须坚持当前的 HTML 结构 :(
还要注意 background-attachment: fixed 在 IOS 上无法正常工作。

【解决方案3】：

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

【讨论】：