如何制作响应式背景图片？

【问题标题】：How to make responsive background image?如何制作响应式背景图片？
【发布时间】：2015-02-24 18:54:20
【问题描述】：

每个人。我想将全宽背景图像制作为响应式。我正在使用 bootstrap3.00 框架。通常当有人使用 bootstrap 框架时，它会将模板制作为响应式，但我使用的背景位于外部引导容器。当我在寻找小型设备时，背景图像显示滚动条。现在我该如何解决这个问题？请专家给我一个合适的解决方案。

【问题讨论】：

你的 html 和 css（相关部分）看起来如何？
背景图片不规定容器的大小，因此您必须有其他规则会导致滚动条出现。发布您的标记和样式表，尽可能减少，以展示您的问题。
这是我的html......

下面是我的css....... .project_area{background:url (img/project_background.jpg);背景尺寸：封面；背景位置：中心中心；显示：块；背景重复：不重复； }

标签： html css twitter-bootstrap

【解决方案1】：

Perfect Background image（来自css-trick.com）

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

示例：

html { 
  background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【讨论】：

我试过作为你的代码。但问题仍然没有消失@Zeratops
尝试添加padding-bottom。 padding-bottom = 100 * height / width = 100 * 150 / 250 = 75