看看今天流行的网站，你肯定会看到的一个设计处理是大屏幕跨越背景图像。添加这些图像的挑战之一来自网站必须响应不同屏幕尺寸和设备的最佳实践 - 这种方法称为响应式网页设计。
由于您网站的布局会随着屏幕尺寸的变化而变化和缩放，因此这些背景图像也必须相应地缩放其尺寸。事实上，这些“流畅的图像”是响应式网站的关键部分之一（以及流畅的网格和媒体查询）。这三个部分从一开始就是响应式网页设计的主要部分，但是向网站添加响应式内嵌图像一直相当容易（内联图像是作为HTML标记的一部分编码的图形），与背景图像（使用CSS背景属性在页面中设置样式）相同，长期以来一直是许多网页设计师和前端开发人员面临的重大挑战。值得庆幸的是，在CSS中添加“background-size”属性使这成为可能。
在另一篇文章中，我介绍了如何使用CSS3属性 背景大小 拉伸图像以适应窗口，但有一种更好，更有用的方法来部署此属性。为此，我们将使用以下属性和值组合：
背景尺寸：封面;
该 覆盖 关键字属性告诉浏览器缩放图像以适应窗口，无论窗口有多大或多小。缩放图像以覆盖整个屏幕，但原始比例和宽高比保持不变，防止图像本身失真。图像尽可能大地放置在窗口中，以覆盖整个窗口表面。这意味着您的页面中不会出现任何空白点或图像上出现任何失真，但这也意味着可能会根据屏幕的纵横比和相关图像修剪部分图像。例如，图像的边缘（顶部，底部，左侧或右侧）可能会在图像上被截断，具体取决于您用于background-position属性的值。如果将背景定向为“左上角”，则图像上的任何多余部分都将从底部和右侧脱落。如果你将背景图像居中，那么多余的部分将会从所有边缘上移开，但是由于多余的部分被展开，所以对任何一方的影响都会减少。
如何使用 背景尺寸：封面;
在创建背景图像时，最好创建一个相当大的图像。虽然浏览器可以使图像更小而不会对视觉质量产生明显影响，但当浏览器将图像放大到比原始尺寸更大的尺寸时，视觉质量会降低，变得模糊和像素化。这样做的缺点是，当您向所有屏幕提供巨型图像时，您的页面会受到性能影响。执行此操作时，请确保正确准备这些图像以进行下载速度和Web传送。最后，您需要在足够大的图像大小和质量以及合理的文件大小之间找到满意的下载速度。
使用缩放背景图像的常用方法之一是，当您希望该图像占据页面的完整背景时，无论该页面是否宽，是在台式计算机上查看还是更小并且正在发送到手持设备，移动设备设备。
将您的图片上传到您的网络托管服务商并将其作为背景图片添加到您的CSS：
background-image：url（fireworks-over-wdw.jpg）;background-repeat：no-repeat;背景位置：中心;背景附件：固定;
首先添加浏览器前缀CSS：
-webkit-background-size：cover;-moz-background-size：cover;-o-background-size：cover;
然后添加CSS属性：
背景尺寸：封面;
使用适合不同设备的不同图像
虽然桌面或笔记本电脑体验的响应式设计非常重要，但可以访问Web的各种设备已经大大增加，并且随之而来的屏幕尺寸也随之变化。
如前所述，例如，在智能手机上加载非常大的响应式背景图像并不是一种高效或带宽敏感的设计。
了解如何使用媒体查询来提供适合其所显示设备的图像，并进一步提高网站与移动设备的兼容性。
