传统的智慧是大的图像出售。有点主观意见告诉我们，大的图像是漂亮的。不管是什么原因，我们喜欢我们的大画面。更重要的是，我们真的很喜欢把它们放在背景上，把大的文字放在上面。
我不在这里讨论我们是否应该这样做。即使我认为大背景图像是网页设计的祸根（我没有），人们会继续使用他们。，包括我。他们是大。他们很漂亮。什么不喜欢？
他们在我们的工具箱里有自己的位置，但我们需要做他们的权利。我不只是在谈论选择正确的图像，这取决于你。我说的是确保我们的照片不会谋杀人们的带宽。如果我们真的要设计“移动第一”，那就必须包含我们的图像。
问题
现在，当人们想把一个页面的背景，甚至只是一个相当大的div，他们往往只是用CSS这样（我使用的每个属性分别为清晰）：
体，bigdiv {。
背景图像：URL（路径/ JPG图像。）；
背景大小：封面；
}
现在，这是良好的台式机和任何互联网连接与无限的数据，但如果越来越多的移动用户想玩的话？你真的要让他们下载，潜力巨大。JPEG到他们的移动电话，他们实际的资金成本？
阅读更多关于响应性设计：
响应的设计：使你的字体工作
保持竞争力-学习反应设计
响应图像-为什么它是一个必须和4种方式来做
响应式设计：你需要知道的
为智能设计设计书籍
我们有三个解决方案，给我们响应的背景图像：
传媒查询
图像设置属性
绝对响应的背景图像（稍后）
传媒查询
这一个是显而易见的解决方案。你定义了一个小背景图像。然后，对于越来越大的屏幕大小，你使用媒体查询来定义越来越大的背景图像。
例如，你可以使用CSS这样：
body {
背景：URL（图片/小图像。JPG）；
}
“媒体屏幕（最小宽度：700px）{
body {
背景：URL（图片/大图。JPG）；
}
}
优点
这是明显的解决办法，真的。我们使用纯CSS，没有改变的标记。
问题
这种方法有一个问题：移动浏览器，尤其是较旧的，会倾向于下载所有的图像，击败的目的。好消息是，有解决方法。坏消息是：他们的解决方法。默认情况下，他们有点臃肿。
然而，他们工作的很好。如果你想学习它们，看看这个：媒体查询和资产下载结果
图像集
所有图像集所做的是提供一个列表的图像通常都是相同的，除了大小。与srcset HTML属性，浏览器将决定自己的形象是最好的下载，基于设备。
我为这些解决方案的源文件，所以你可以看到他们的行动。你可以下载下面的。现在，这里是你需要知道的：
的HTML
<！DOCTYPE HTML >
< HTML郎=“en”>
<head>
<元字符集=“UTF-8”>
<标题>纯CSS背景图像演示响应</名称>
< /头>
< body >
< H1 >纯CSS背景图像演示响应<< / H1 >
＜／body >
/ HTML > <
CSS的（基本）
body {
背景图像：图像集
URL（常规图像。JPG）1，
URL（双大小的图像。JPG）2X
）；
}
问题
让我们撇开一个瞬间，这一事实：浏览器对图像集的支持是不可能的。让我们忽略你需要做这个工作的供应商前缀。真正的问题是，图像不是基于屏幕/视口的大小选择，但基于像素密度。
这意味着它是伟大的视网膜屏幕和正常的类型之间切换。需要一个更大的图像的那些巨大的iMac的屏幕？这里的图像设置功能是帮助。如果这是你所需要的，然后为你设置图像。
你可以使用它的图像，是小的反正：图标，配置文件，和其他东西的那种。这些都是足够小，他们不会打破移动用户的数据计划。但是，嘿，我们需要大量的背景图像，对吗？所以这个解决方案还没有准备好。
网站建设绝对响应背景图像
所以现在，我们所看到的，我们所需要的：响应图像，基于屏幕/视口大小的选择，我们希望浏览器只下载其中的一个。猜什么？我们可以这样做。
坏消息是，它需要改变你的标记。然而，这种变化是微乎其微的。所有您需要做的就是添加一个DIV，和背景图像本身。