原文： CSS Background Image – How to Add an Image URL to Your Div

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

使背景图像完全伸展以覆盖整个浏览器视口是网页设计中的常见任务。幸运的是，只需几行 CSS 就可以完成这项任务。

用图像覆盖视口

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

html {
   min-height: 100%;
}

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

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Background-Size 属性的魔力

background-size 属性使魔法发生：

background-size: cover;

cover 告诉浏览器确保图像始终覆盖整个容器，在本例中为 html。即使它必须拉伸图像或从边缘剪掉一点，浏览器也会覆盖容器。

由于浏览器可能会拉伸图像，因此你应该使用分辨率足够高的背景图像，否则图像可能会出现像素化。

如果你关心让所有图像都出现在背景中，那么你将需要确保图像的纵横比与屏幕尺寸相比相对接近。

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

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

background-repeat: no-repeat;

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

background-position: center center;

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

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

html {
   min-height: 100%;
   background-image: url(image.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

如何在滚动时将图像固定到位

现在，如果你想在背景图像顶部添加文本并且该文本溢出当前视口，你可能希望确保当用户向下滚动以查看其余文本时你的图像保持在背景中：

background-attachment: fixed;

你可以使用缩写值包含上述所有背景属性：

background: url(image.jpg) center center cover no-repeat fixed;

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

为了锦上添花，你可能希望为较小的屏幕添加媒体查询：

@media only screen and (max-width: 767px) {
  html {
     background-image: url(smaller-image.jpg);
  }
}

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

因此，现在你知道了创建响应式全页图像背景的魔力，是时候创建一些漂亮的网站了！

想查看更多 Web 开发技巧和知识？