使 CSS 背景图像滚动

Question

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

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

Answer 1

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

Answer 2

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

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

使 CSS 背景图像滚动

Make CSS background image scroll

html

css

scroll

background-image