HTML 背景图片
几乎所有 HTML 元素都可以指定背景图片。
HTML 元素的背景图片
要在 HTML 元素上添加背景图片，请使用 HTML style 属性和 CSS background-image 属性。
您也可以在 <style> 元素（在 <head> 部分）中指定背景图片。
页面背景图片
如果您希望整个页面都有背景图片，则必须在 <body> 元素上指定背景图片。
背景重复
如果背景图片小于元素，则图片会水平和垂直重复，直到到达元素的末尾。
要防止背景图片重复，请将 background-repeat 属性设置为 no-repeat。
示例
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
尝试一下 »
背景覆盖
如果您希望背景图片覆盖整个元素，可以将 background-size 属性设置为 cover.。
此外，为了确保整个元素始终被覆盖，请将 background-attachment 属性设置为 fixed:。
这样，背景图片就会覆盖整个元素，不会拉伸（图片会保持原始比例）。
示例
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
尝试一下 »
背景拉伸
如果您希望背景图片拉伸以适应整个元素，可以将 background-size 属性设置为 100% 100%。
尝试调整浏览器窗口大小，您会发现图片会拉伸，但始终覆盖整个元素。
示例
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
尝试一下 »
学习更多 CSS
从上面的示例中，您已经了解到可以使用 CSS 背景属性来设置背景图片的样式。
要详细了解 CSS 背景属性，请学习我们的 CSS 背景教程。
