使 CSS 背景图像滚动答案

【问题标题】：Make CSS background image scroll使 CSS 背景图像滚动
【发布时间】：2017-04-19 20:39:04
【问题描述】：

如何使此背景图像与页面的其余部分一起滚动？（背景附件：滚动；不起作用。）在滚动之前，我将背景图像和徽标放置在我希望它们停留的位置，但是当它滚动时，徽标和标题会滚动，但导航栏和背景图像不会。

.content {
    overflow: auto;
    position: relative;
    }
.content:before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top:-175px;
    z-index: -1;

    display: block;
    background-image: url("/assets/backgroundpic.jpg");
    background-size:cover;
    background-position:center top;

    width: 100%;
    height: 500px;
}



<div class="container content text-center" style="position:relative;">
  <%= image_tag("/assets/logo-seal.png", size: "250x250", class: "img-responsive img-circle margin", style: "display:inline;margin-top:200px;") %>
  <h1 style="font: 48px Oswald, sans-serif;">TITLE</h1>
</div>

【问题讨论】：

标签： html css scroll background-image

【解决方案1】：

此背景图像分配给具有position: fixed; 的元素。由于元素不会滚动（被固定），它的背景也不会滚动。

您必须在不修复该元素的情况下找到解决方案。

【讨论】：

谢谢！我将位置更改为绝对位置并将内容类放在容器外部的 div 中。我不知道我以前怎么没想到。

【解决方案2】：

如果您在使用 jQuery 时没有问题，这里是一个简单的方法 https://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

【讨论】：