我怎样才能使我的背景图像响应答案

【问题标题】：How can I do my background image responsive我怎样才能使我的背景图像响应
【发布时间】：2016-04-05 01:38:16
【问题描述】：

我正在处理我的网页。我目前面临几个问题：

图片不适应浏览器窗口的大小，如果我把浏览器窗口缩小，图片会显示为重复

我想要，每张照片都占据整个显示屏

如何使页脚和菜单在滚动期间保持可见？

这是Codepen的链接

#intro{
  background-image: url("http://www.tricentis.com/wp-content/uploads/2015/10/photo-1435575653489-b0873ec954e2.jpg");
  padding-top: 30px;
  background-size: cover; 
  height: 100vh;
  background-size: 100%;
}

提前感谢您的帮助

【问题讨论】：

您看到背景图像翻倍的原因是因为您设置了background-size: 100% 属性。这会覆盖您真正想要的 background-size: cover 属性。删除background-size: 100%，你应该很高兴。如果您希望页脚和页眉保持在固定位置，请尝试将它们设置为position: fixed。
提及您之前尝试过的内容是一个很好的做法。这个问题有点宽泛，有类似的问题，如this、this 和this。

标签： css webpage responsive

【解决方案1】：

如果您要将背景大小设置为100% 几行，那么将其设置为cover 没有任何好处。删除background-size:100%，它工作正常。

【讨论】：

谢谢。我做到了，但问题出在小显示器上，在这种情况下，我的图片之间有空白
你可以尝试包含而不是覆盖。

【解决方案2】：

你可以设置

background-repeat: no-repeat;

确保每张图片不显示多次。

【讨论】：