在本教程中，我们将学习最简单的技术，使背景图像完全伸展以覆盖整个浏览器视口。我们将使用CSSbackground-size使之发生的财产;不需要JavaScript。
视图演示从GitHub下载源代码
响应式全背景图像示例
拥有一张覆盖整个网页背景的大照片目前非常流行。下面是一些有响应式全背景图片的网站:
航行的集体
数字心灵感应
玛丽安餐厅如果你想在你的下一个网页设计项目中实现类似的外观，你来对地方了。
用CSS创建响应性背景图像的核心概念
这是我们的计划。
使用background-size属性覆盖整个视口
CSSbackground-size属性可以具有的值封面．的封面Value告诉浏览器自动按比例缩放背景图像的宽度和高度，使它们总是等于或大于视口的宽度/高度。
使用媒体查询为移动设备提供更小的背景图像
为了提高小屏幕上的页面加载速度，我们将使用媒体查询来提供背景图像文件的缩小版本。这是可选的。
没有这个技术也能工作。
但是为什么为移动设备提供更小的背景图像是个好主意呢?我在演示中使用的图像大约是5500x3600px。这个尺寸将覆盖目前市场上销售的大多数宽屏计算机显示器，但代价是提供1.7MB的文件。
在任何情况下，仅仅是一张背景照片的有效载荷都不是一件好事，但在移动互联网连接上尤其糟糕。
而且，在小屏幕设备上，图像尺寸过大(本教程将进一步讨论这一点)。
SEO和网页设计就像花生酱和果冻。请在我们的免费的导游:如何整合搜索引擎优化和网页设计。
给我看指南让我们回顾一下这个过程。
超文本标记语言
这是你所需要的标记:
<！Doctype html> .．.你的内容在这里…< /身体> < / html >
我们将把背景图像分配给身体元素，以便图像将始终覆盖浏览器的整个视口。但是，这种技术也适用于任何块级元素(例如div或者一个形式）.
如果块级容器的宽度和高度是流动的，则背景图像将始终缩放以完全覆盖容器。
CSS
的样式声明了一个样式规则身体元素如下所示:body {/*图像的位置*/背景图片:url(图片/ background-photo.jpg);/*背景图像始终以垂直和水平居中*/背景-位置:中心中心;/*背景图像不平铺*/平铺方式:不再重演;/*背景图像固定在视口中，因此当内容的高度大于图像的高度*/时，它不会移动background-attachment:固定;这是什么使背景图像重新缩放基于容器的大小*/background-size:封面;/*设置背景图像加载时显示的背景颜色*/background - color: # 464646;最需要注意的属性/值对是:
background-size:封面;
这就是奇迹发生的地方。这个属性/值对告诉浏览器按比例缩放背景图像，使其宽度和高度等于或大于元素的宽度/高度。(在我们的情况下，这是身体元素)。
但是，这个属性/值对有一个问题:如果背景图像小于身体元素的尺寸——这将发生在高分辨率屏幕和/或当你的页面上有大量的内容时——浏览器将通过编程放大图像。
而且，我们都知道，当我们将图像从自然尺寸放大时，图像质量会下降(换句话说，会发生像素化)。
当图像超过其自然尺寸时，图像质量会受到影响。在选择要使用的图像时，请记住这一点。
演示使用了一个巨大的5500x3600px的大屏幕照片，所以在我们遇到麻烦之前会有一段时间。让我们继续。因此，背景图像总是在视口中居中，我们声明:
背景-位置:中心中心;
上面设置缩放轴在视口的中心。
接下来，我们需要处理内容高度大于可见视口高度的情况。当这种情况发生时，将出现一个滚动条。我们要做的是确保背景图像即使在用户向下滚动时也保持不变，否则我们会在底部用完图像，或者当用户向下滚动时背景会移动(这可能会非常分散注意力)。
要做到这一点，我们设置background-attachment财产固定．
background-attachment:固定;
在演示中，我加入了一个“加载一些内容”功能，这样你就可以看到滚动行为background-attachment是固定．你能做的一件事是下载演示然后摆弄位置属性值(例如。background-attachment而且背景位置)，看看它如何影响滚动页面和背景图像的行为。
其他属性值是不言自明的。
CSS简写法
我用完整的符号写了背景属性，以使CSS更容易描述。上面的等效的CSS简写符号是:body {background: url(background-photo.jpg) center center cover no-repeat fixed;你要做的就是改变url值指向背景图像的位置，然后就可以开始了。
可选:小屏幕媒体查询
对于小屏幕，我使用Photoshop将原始背景图像按比例调整到768x505px，并通过Smush运行。它要多剪出几个字节。这样可以将文件大小从1741KB减小到114KB。这是一个减少93%文件大小。
请不要误解我的意思，114KB对于一个设计的纯美学组件来说仍然相当大。对于114KB的有效负载，我通常只会在文件有可能显著改善UX的情况下才会让用户使用它，因为它太大了移动网页性能权衡。下面是媒体查询:@media only screen and (max-width: 767px) {body {/*此背景图像的文件大小减小了93%，以提高移动互联网连接上的页面加载速度*/背景图片:url(图片/ background-photo-mobile-devices.jpg);媒体查询设置为amax-width: 767像素断点，在我们的例子中，这意味着如果浏览器视口大于767px，它将提供较大的背景图像文件。
使用上述媒体查询的缺点是，如果你调整浏览器窗口的宽度，例如从1200px宽度减小到640px宽度(反之亦然)，你会在加载更大或更小的背景图像时暂时看到闪烁。此外，由于一些小型设备可以呈现更多的像素——例如，拥有视网膜显示屏的iPhone 5可以呈现1136x640px——较小的背景图像将被像素化。
用CSS创建第一个响应性背景图像
您可以获得本教程的最新源代码从GitHub．关于这种技术，如果我要说一点警告的话，那就是:请谨慎使用它，因为大文件会严重影响用户体验，特别是当我们的用户没有快速或可靠的互联网连接时。这也是为什么你应该设置一个良好的默认背景颜色的原因，这样用户可以在背景图像加载时阅读内容。
在将Web图像投入生产之前优化它们也不是一个坏主意;我们有一些文章来帮助你:
许可:公共领域奉献
如果您想使用本教程中包含的源代码，无需获得许可;我已经把教程的代码放在公共领域CC0 1.0通用．的源代码在我的GitHub回购不受任何版权限制。您可以使用、出售、修改和分发源代码，所有这些都不需要获得许可、提供归属或任何其他要求。
(背景图片不是我的，它来自Unsplash)。
