本教程将向你展示一种使用CSS编写整页背景图像的简单方法。你还将学习如何使图像响应用户的屏幕尺寸。

使背景图像完全伸展以覆盖整个浏览器视口是Web设计中的常见任务。幸运的是，可以使用几行CSS来完成此任务。

01用图像覆盖视口

首先，我们要确保我们的页面实际上覆盖了整个视口：

在内部html，我们将使用background-image属性设置图像：

02“背景大小”属性的魔力

神奇的发生在background-size属性上：

cover告诉浏览器确保图像始终覆盖整个容器，在这种情况下为html。即使浏览器必须拉伸图像或从边缘切掉一点，浏览器也会覆盖它。因为浏览器可能会拉伸图像，所以您应该使用分辨率足够高的背景图像。否则，图像可能会显得像素化。如果你想让所有图像都出现在背景中，那么您将要确保图像的长宽比与屏幕尺寸相比相对接近。

03如何微调图像位置并避免平铺

浏览器还可以选择将背景图像显示为图块，具体取决于其大小。为防止这种情况发生，请使用no-repeat：

为了保持美观，我们将图像始终居中：

这将始终使图像水平和垂直居中。

现在，我们生成了一个完全响应的图像，该图像将始终覆盖整个背景：

04滚动时如何固定图像

现在，以防万一你想在背景图像上方添加文本并且该文本溢出当前视口，你可能需要确保当用户向下滚动以查看文本的其余部分时图像保留在背景中：

你可以使用短记号包括上述所有背景属性：

05可选：如何为移动设备添加媒体查询

如果要为图像锦上添花，你可能希望为较小的屏幕添加媒体尺寸：

你可以使用Photoshop或其他图像编辑软件来缩小原始图像的尺寸，以提高移动Internet连接上的页面加载速度。

因此，既然你知道创建自适应的全页图像背景的魔力，那么现在该创建一些漂亮的网站了！