时间戳

首页 > 解决方案 > 修复了滚动期间移动的背景图像

css - 修复了滚动期间移动的背景图像

问题描述

好的，我试图删除所有无关的东西，以 a) 看看我是否能找到问题所在，b) 使其更容易发布。我还没有发现问题，所以.. 进入计划 b！

我有一个我认为应该是静态的#page-wrapper，允许内容在其上滚动，但我显然遗漏了一些东西，因为向下滚动会显示白色背景。任何想法将不胜感激！

    #page-wrapper {
      background: url(https://templatemo.com/templates/templatemo_543_breezed/assets/images/slide-02.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width: 100%;
      height: 100vh;
    }

https://jsfiddle.net/bjwxfyop/

标签： cssbackground-image

解决方案

@zimdanen。我认为这里的问题是作为视口高度提供的高度。由于内容是可滚动的，要么给它 100%，要么你可以完全删除 height 属性。溢出滚动有效，但如果您检查开发工具，我怀疑它是否反映了包装器的实际高度

#page-wrapper {
  display: table;
  background: url(https://templatemo.com/templates/templatemo_543_breezed/assets/images/slide-02.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

推荐阅读