在HTML5的标准规范中，并没有为元素提供直接设置背景图的属性，所有背景图相关的配置都需要通过CSS的background相关属性来实现。开发者可以根据需求选择不同的设置方式，适配不同的页面场景。
给单个HTML元素设置背景图
如果只需要给某个特定的元素添加背景图，比如一个div容器、一个section区块，可以直接给该元素设置CSS样式。首先需要准备一个HTML结构，示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单个元素背景图示例</title>
<style>
/* 给类名为box的元素设置背景图 */
.box {
width: 500px;
height: 300px;
/* 核心背景图设置 */
background-image: url('https://ipipp.com/bg1.jpg');
/* 背景图不重复 */
background-repeat: no-repeat;
/* 背景图居中显示 */
background-position: center;
/* 背景图覆盖整个元素区域 */
background-size: cover;
}
</style>
</head>
<body>
<div class="box">这是一个带背景图的容器</div>
</body>
</html>
上面的代码中，background-image是设置背景图的核心属性，值需要写为url('图片路径')的格式，图片路径可以是相对路径、绝对路径或者网络地址。其他几个辅助属性可以调整背景图的显示效果：
- background-repeat：设置背景图是否重复，可选值有repeat（默认，水平和垂直都重复）、no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）
- background-position：设置背景图的位置，可用关键词（left、right、center、top、bottom）或者具体像素、百分比来定义
- background-size：设置背景图的尺寸，可选值有cover（等比例缩放覆盖整个容器，可能裁剪部分图片）、contain（等比例缩放直到完整显示图片，容器可能有空白）、具体像素或百分比
给整个HTML页面设置背景图
如果要给整个页面添加背景图，只需要给body元素或者html元素设置背景图样式即可，因为这两个元素默认会覆盖整个浏览器视口。示例如下：
/* 给整个页面设置背景图 */
body {
/* 清除body默认的外边距，避免背景图边缘留白 */
margin: 0;
/* 设置背景图 */
background-image: url('https://ipipp.com/bg2.jpg');
/* 不重复 */
background-repeat: no-repeat;
/* 居中 */
background-position: center;
/* 覆盖整个视口 */
background-size: cover;
/* 固定背景图，滚动页面时背景不动 */
background-attachment: fixed;
}
这里的background-attachment: fixed是可选属性，设置后页面滚动时背景图会固定在视口中，不会跟随内容滚动，适合做全屏固定的背景效果。
使用background简写属性设置背景图
如果觉得分开写多个background属性比较繁琐，可以使用background简写属性，一次性设置多个背景相关的属性，顺序没有严格要求，但是一般按照背景色、背景图、重复方式、位置、尺寸、附着方式的顺序来写，示例如下：
/* 简写方式设置背景图 */
.header {
width: 100%;
height: 400px;
/* 简写属性：背景色 背景图 重复方式 位置/尺寸 附着方式 */
background: #f0f0f0 url('https://ipipp.com/bg3.jpg') no-repeat center/cover fixed;
}
需要注意，如果使用简写属性，没有设置的属性会使用默认值，比如没有写background-repeat的话，默认会是repeat重复显示。
背景图设置的常见问题
在实际开发中设置背景图经常会遇到一些问题，比如背景图不显示、显示不全等，常见原因和解决方法如下：
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 背景图不显示 | 图片路径错误、图片文件不存在、元素没有设置宽高 | 检查图片路径是否正确，确认元素有明确的宽高尺寸 |
| 背景图重复显示 | 没有设置background-repeat: no-repeat | 添加background-repeat: no-repeat属性 |
| 背景图显示不全 | 容器尺寸小于图片尺寸，且没有设置background-size | 设置background-size: cover或者contain |
注意：如果背景图需要适配高清屏幕，建议使用2倍图或者更大尺寸的图片，避免在高分辨率设备上显示模糊。同时如果背景图加载失败，可以设置一个备用背景色，提升用户体验，比如background: #cccccc url('bg.jpg') no-repeat center;，当图片加载失败时就会显示灰色背景。
HTML5background_imageCSSbackground_property修改时间：2026-06-26 15:57:32