滚动/调整大小时，如何将背景图像保留在屏幕上

Question

我试图做的是视差滚动浏览几个图像，但不知何故 1）平铺发生（图像不断重复或不显示完整图像）和 2）当我尝试不同的屏幕尺寸（特别是手机）时，它不起作用，因为图像没有调整大小。

有没有办法解决这个问题？

section.module.parallax-1 {
  background-image: url("http://cdn.udderlypettable.com/wp-content/uploads/2015/05/Maine-Coon-Face.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

我已将我的代码放在Codepen

上

Answer 1

使用background-size: cover。这样，您的背景图像将根据父div大小调整大小/裁剪。