如何使用HTML将背景图像添加到网页的顶部

在本教程中，我们将学习如何使用 <div> 容器来构建网页的顶部。我们将使用 style 属性来指定 <div> 容器的高度，应用背景图片，并指定背景图片应覆盖 <div> 容器的整个区域.

在开始之前，我们需要一张背景图片。您可以下载并使用我们演示站点的背景图片用于教程目的，也可以选择新图片。（有关如何使用 HTML 将图像添加到网页的复习，请访问本教程系列前面的教程 HTML 图像）。

选择背景图像后，将图像保存在 images 文件夹中为 background-image.jpg。

接下来，将突出显示的代码片段粘贴到您的 index.html 文件中，在开始 <body> 标记下方和结束 </body> 标记上方：

. . .
<body>
<!--First section-->
  <div style="background-image: url('Image_Location'); 
  background-size: cover; height:480px; padding-top:80px;">
  </div>
</body>
...

确保将显示 Image_Location 的文本与图像的文件路径进行切换，并且不要忘记添加结束 </div> 标记。

请注意，我们添加了注释  来帮助组织我们的 HTML 代码。注释是一段被浏览器忽略的代码。注释用于帮助向开发人员解释或组织代码。它们是用开始标签  创建的。

我们还将 height 指定为 480 像素，将 padding-top 指定为 80 像素，这将在 <div> 元素的顶部和我们放置在其中的任何内容之间创建 80 像素的空间. 请注意，在我们在下一步中将内容放入其中之前，您将无法看到 padding-top 值的效果。

保存文件并在浏览器中重新加载。您应该会收到如下信息：

或者，您可以使用背景颜色而不是背景图像。要使用背景颜色，请将您刚刚创建的 <div> 元素代码片段替换为以下突出显示的 <div> 元素代码片段，如下所示：

. . .
<body>
  <!--First section-->
  <div style="background-color: #f4bc01; height:480px; padding-top:80px;"> 
  </div>
</body>
...

保存文件并在浏览器中重新加载以检查结果。现在应该将背景图像替换为相同大小但具有纯黄色的容器。

如果您将站点上的 <div> 容器与演示站点上的相同 <div> 容器进行比较，您可能会注意到您网页的 <div> 容器被包围了由一小部分空白。此页边距是因为所有 HTML 页面默认自动设置为小页边距。

要删除这个边距，我们需要在开始的 <body> 标记中添加一个样式属性，将 HTML 页面的 <body> 元素的边距设置为 0 像素。在 index.html 文件中找到打开的 <body> 并使用突出显示的代码对其进行修改：

样式=“边距：0；” >

在浏览器中保存并重新加载文件。现在顶部 <div> 容器周围应该没有白边了。

您现在应该知道如何添加带有背景图像的 <div> 容器来构建网页的顶部。