使用响应式设计管理背景图像的最佳方法？答案

【问题标题】：Best way to manage background images with responsive design?使用响应式设计管理背景图像的最佳方法？
【发布时间】：2014-04-06 02:47:43
【问题描述】：

在使用不可平铺背景图片的网站上，让其在所有设备/所有缩放中看起来都不错的最佳方法是什么？

CSS是

背景：#aaa url(//url);

所以在图像结束的地方使用了背景色。

我最初的想法是给背景图片 100% 的大小，这样无论缩放或视口大小，背景图片都不会丢失质量。

这是一种好方法，还是有另一种更好的方法来管理响应式设计中的背景图像？

谢谢

【问题讨论】：

标签： html css image

【解决方案1】：

我推荐这个

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;
}

来源：CSS-Tricks: Perfect Full Page Background Image

【讨论】：

顺便说一下 dwreck08，在大屏幕上，背景图像显然会失去质量，你有什么建议？大图像分辨率？什么样的尺寸最好？有什么想法吗？