如何让单独div内的固定背景图显示在页面所有其他内容后方

z-index 仅对设置了非static定位的元素生效，固定定位的背景图默认层级高于普通静态定位的文档流内容，因此会覆盖文本、按钮等元素，之前调整未生效大概率是没有针对层级关系做对应配置。

解决方案 #

仅需给背景图元素新增一行z-index: -1配置即可，修改后的完整 CSS 如下：

#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; /* 新增此行 */
}

补充说明 #

如果添加后背景图消失，检查背景图的父级元素是否设置了非透明背景色，将对应父元素的background-color属性设置为transparent即可。
如果仍存在层级覆盖问题，给需要显示在上方的内容元素添加以下配置即可：

position: relative;
z-index: 1;

内容的提问来源于stack exchange，提问作者6bytes