HTML 背景图像
可以为几乎任何 HTML 元素指定背景图像。
HTML 元素上的背景图像
要在 HTML 元素上添加背景图像，请使用 HTML style 属性和 CSS background-image 属性：
也可以在 <head> 部分的 <style> 元素中指定背景图像：
页面上的背景图像
如果希望整个页面具有背景图像，则必须在 <body> 元素上指定背景图像：
背景重复
如果背景图像小于元素，则图像将在水平和垂直方向上重复自身，直到到达元素的末端：
要避免背景图像自身重复，请将 background-repeat 属性设置为 no-repeat。
实例
<style>
body {
background-image: url('example_img_girl.jpg');
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>
亲自试一试 »
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>
亲自试一试 »
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
了解更多 CSS
从上面的例子中，您了解到，可以使用 CSS 背景属性来设置背景图像的样式。
了解有关CSS背景属性的更多信息： CSS Background 教程。
