在网页开发中，将图片设置为背景图片是美化页面的常用操作，我们可以通过HTML标签属性或者CSS样式两种方式来实现这个需求，不同的实现方式有不同的特点和适用场景。
一、使用body标签的background属性设置
这是最基础的设置方式，直接在<body>标签中添加background属性，属性值为图片的路径即可。这种方式兼容性较好，但是可配置的属性较少，只能设置背景图片的路径。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景图片示例</title>
</head>
<body background="bg.jpg">
<h1>这是设置了背景图片的页面</h1>
</body>
</html>
需要注意的是，这里的图片路径可以是相对路径，也可以是绝对路径，如果是本地图片，要保证路径正确，否则背景图片无法显示。
二、使用CSS的background属性设置
通过CSS设置背景图片是更推荐的方式，因为可以配置更多的背景相关属性，适配性更强，能够实现更多样化的效果。我们可以将CSS写在<style>标签中，也可以写在外部CSS文件里。
1. 基础设置方式
直接在CSS中给对应元素设置background-image属性，值为url(图片路径)即可。
/* 给body设置背景图片 */
body {
background-image: url("bg.jpg");
}
2. 常用背景属性配置
使用CSS设置背景图片时，还可以配合其他背景相关属性调整显示效果，常用的属性如下：
- background-repeat：设置背景图片是否重复，可选值有
repeat（默认，水平和垂直都重复）、no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复） - background-size：设置背景图片的尺寸，可选值有
cover（等比例缩放铺满容器，可能裁剪图片）、contain（等比例缩放，保证图片完整显示，可能留空白）、具体的像素值或百分比 - background-position：设置背景图片的位置，可选值有
center（居中）、top（顶部）、left（左侧）等，也可以用像素值或百分比指定具体位置 - background-attachment：设置背景图片是否随页面滚动，可选值有
scroll（默认，随页面滚动）、fixed（固定，不随页面滚动）
我们可以将这些属性合并到background简写属性中，简化代码：
body {
/* 简写形式：背景图片 重复方式 位置/尺寸 滚动方式 */
background: url("bg.jpg") no-repeat center/cover fixed;
}
三、给指定元素设置背景图片
除了给整个页面设置背景图片，我们也可以给div、section等指定元素设置背景图片，操作方式和给body设置类似，只需要选中对应的元素即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>指定元素背景图片示例</title>
<style>
.banner {
width: 100%;
height: 300px;
background: url("banner.jpg") no-repeat center/cover;
}
</style>
</head>
<body>
<div class="banner"></div>
<p>这是banner区域下方的其他内容</p>
</body>
</html>
四、注意事项
- 图片路径要正确，如果图片和html文件在同一目录，直接写图片名称即可；如果在子目录，要写清楚相对路径，比如
images/bg.jpg - 如果背景图片加载失败，建议设置背景颜色作为 fallback，避免页面出现空白，比如添加
background-color: #f5f5f5; - 使用
background-size: cover时要注意，图片可能会被裁剪，重要内容尽量不要放在边缘位置 - 如果背景图片需要适配不同屏幕尺寸，建议结合媒体查询调整背景图片的尺寸或者更换不同分辨率的图片
htmlbackground_imageCSSbackground修改时间：2026-06-19 01:57:33