给网页添加背景图片html
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.
本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义此网站 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从本系列的开头开始 。
At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.
在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。
In this tutorial we’ll learn how to use a <div> container to structure the top section of the webpage. We will use the style attribute to specify the height of our <div> container, apply a background image, and specify that the background image should cover the entire area of the <div> container.
在本教程中，我们将学习如何使用<div>容器来构造网页的顶部。 我们将使用style属性指定<div>容器的高度，应用背景图像，并指定背景图像应覆盖<div>容器的整个区域。
Before we get started, we’ll need a background image. You may download and use our demonstration site’s background image for the purpose of the tutorial, or you can choose a new image. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series).
在开始之前，我们需要背景图片。 您可以下载并使用我们的演示站点的背景图像来完成本教程，也可以选择一个新图像。 (有关如何使用HTML向网页添加图像的更新，请访问本系列教程前面的HTML图像教程)。
Once you’ve chosen your background image, save the image in your images folder as background-image.jpg.
选择背景图像后，将图像另存为images文件夹中的background-image.jpg 。
Next, paste the highlighted code snippet into your index.html file below the opening <body> tag and above the closing </body>:
接下来，将突出显示的代码段粘贴到您的index.html文件中，该标记在<body>标记下方和</body>上方：
. . .
<body>
<!--First section-->
<div style="background-image: url('Image_Location'); background-size: cover;; height:540px;
</div>
</body>
</html>Make sure to switch the text that says Image_Location with the file path of your image and don’t forget to add the closing </div> tag.
确保用图片的文件路径切换表示Image_Location的文本，并且不要忘记添加结束</div>标记。
Note that we have added the comment <!--First section--> to help organize our HTML code. A comment is a piece of code that is ignored by the browser. Comments are used to help explain or organize code to developers. They are created with the opening tag <!-- and the closing tag -->.
请注意，我们添加了注释<!--First section-->以帮助组织HTML代码。 注释是浏览器会忽略的一段代码。 注释用于帮助向开发人员解释或组织代码。 它们是用开始标记<!--和结束标记--> 。
Save the file and reload it in the browser. You should receive something like this:
保存文件并将其重新加载到浏览器中。 您应该会收到以下信息：
Alternately, you can use a background color instead of a background image. To use a background color, replace the <div> element code snippet you just created with the following highlighted <div> element code snippet like this:
或者，您可以使用背景色代替背景图像。 要使用的背景颜色，更换<div>元素的代码段，您只需用以下突出显示创建<div>元素的代码片段是这样的：
...
<body>
<div style="background-color: #f4bc01; height:540px;">
</div>
</body>
</html>Save the file and reload it in the browser to check your results. The background image should now be replaced with a container that is the same size but has a solid yellow color.
保存文件，然后将其重新加载到浏览器中以检查结果。 现在应使用大小相同但颜色为黄色的容器替换背景图片。
If you compare the <div> container on your site with the same <div> container on the demonstration site, you may notice that your webpage’s <div> container is surrounded by a small margin of white space. This margin is due to the fact that all HTML pages are automatically set to have a small margin by default.
如果比较<div>与同一网站上的容器<div>在容器示范点 ，你可能会注意到你的网页的<div>容器是由白色空间小幅度的包围。 此裕度是由于以下事实：默认情况下，所有HTML页面均自动设置为较小的裕度。
To remove this margin, we need to add a style attribute to the opening <body> tag that sets the margin of the <body> element of the HTML page to 0 pixels. Locate the opening <body> in your index.html file and modify it with the highlighted code:
要删除此空白，我们需要在开始的<body>标记中添加一个style属性，以将HTML页面的<body>元素的空白设置为0像素。 在index.html文件中找到开头的<body> ，并使用突出显示的代码对其进行修改：
<body style=“margin:0;”>
<body style =“ margin：0;” >
Save and reload the file in your browser. There should now be no white margin surrounding the top <div> container.
在浏览器中保存并重新加载文件。 现在，顶部<div>容器周围应该没有白边。
You should now know how to add a <div> container with a background image to structure the top section of a webpage.
现在，您应该知道如何添加带有背景图像的<div>容器来构造网页的顶部。
翻译自: https://www.digitalocean.com/community/tutorials/how-to-add-a-background-image-to-the-top-section-of-your-webpage-with-html
给网页添加背景图片html
![[挑战MVC极限]EasyJWeb-1.0特性之二－快速体验](http://www.easyjf.com/upfile/20070809/11866653287651157793070.JPG)