在HTML中设置网页背景图片，核心思路不是使用某个专门的HTML标签，而是通过CSS来控制背景显示。background-image属性是最直接的入口，它可以作用在<body>元素上，让整个页面拥有背景图，也可以作用在任意<div>、<section>等容器上，实现局部背景效果。开始之前需要明确一点：背景图片路径是否正确，会直接影响图片能否加载，所以路径处理要放在第一位。
基础设置方式：使用CSS背景属性
要设置整个网页的背景图片，最简单的写法是在CSS中为body元素添加背景样式。下面这段代码展示了最常用的基础配置，图片路径使用相对路径时通常指向项目中的images目录。
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
如果只想给某个内容区域设置背景图，可以把选择器从body换成对应的类名。比如一个登录页的卡片容器，可以写成.login-panel { background-image: url(../images/bg-login.jpg); }。这里的../表示返回上一级目录，再进入images目录。路径写错是最常见的背景图不显示原因。
除了background-image单独声明，也可以使用CSS的background简写属性。简写的好处是一次性描述颜色、图片、平铺、定位等，但要注意简写中未显式写出的属性会被重置为初始值。下面这段代码用一个声明就设置了背景色、背景图、不平铺和居中定位。
body {
background: #f5f6fa url(images/bg.jpg) no-repeat center center;
}
另外还可以使用内联样式直接写在HTML元素上，例如<body style="background-image: url(images/bg.jpg);">。这种方式虽然立刻生效，但不利于统一维护，当页面背景需要响应不同设备或切换主题时，不太推荐大量使用。实际项目中更建议把背景样式写入独立的CSS文件，保持结构与样式分离。
关键属性如何控制背景图片表现
设置了背景图之后，默认情况下浏览器会以图片原始尺寸平铺显示。也就是说，如果图片小于容器，会像瓷砖一样重复铺满；如果图片大于容器，可能只显示左上角部分。要控制这些表现，需要配合background-repeat、background-size和background-position。
.hero {
background-image: url(images/hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
background-repeat可以取repeat、no-repeat、repeat-x、repeat-y。对于大图背景，一般会设置no-repeat避免重复。若想要横向或纵向连续纹理，则可以分别使用repeat-x和repeat-y。
background-size是处理背景图拉伸和裁切的核心属性。cover表示背景图等比缩放，直到完全覆盖容器，可能会裁掉图片超出部分；contain表示图片完整显示在容器内，但可能留下空白。全屏大图通常使用cover，而产品展示图、logo背景等需要完整显示的场景更适合contain。
定位属性background-position决定背景图从哪个位置开始显示。常见写法有center center、left top，也可以使用百分比或像素值。例如background-position: 50% 20%会让图片水平居中、纵向偏向顶部，适合人物图片背景需要露出头部的情况。
还有一个属性background-attachment，设置为fixed时，背景图不会随滚动条移动，产生视差效果。但要注意，在移动端Safari等浏览器上，background-attachment: fixed的支持并不理想，可能出现背景图被拉伸或滚动卡顿。移动端通常建议改用绝对定位模拟固定背景，或者直接使用scroll。
背景图不显示的常见原因及排查方法
如果CSS里写了background-image，但页面没有任何背景图显示，排查时不要只盯着属性本身。第一步应该确认图片路径是否真的能访问到。浏览器的开发者工具中，Network面板会显示背景图请求状态，如果状态码是404，说明路径写错；如果状态码是200但仍然不显示，则要检查CSS选择器是否生效，或者容器高度是否为零。
/* 路径错误示例：文件实际在 images/bg.jpg，但多写了一层 assets */
body {
background-image: url(assets/images/bg.jpg);
}
容器高度为零的情况在局部背景中非常常见。例如一个<div>没有内容，也没有设置高度，即使背景图加载成功，也会因为容器高度为0而完全不可见。可以通过设置min-height、height或给内部添加内容来解决。下面这段代码演示了给一个空容器设置最小高度，让背景图有展示空间。
.banner {
background: url(images/banner.jpg) no-repeat center center / cover;
min-height: 320px;
}
还应该检查CSS中是否将背景图覆盖。比如后面的规则中写了background: #fff;，由于简写会重置背景图片，可能把前面的background-image冲掉。如果多个选择器都作用于同一个元素，后面的规则优先级又更高，背景图就可能丢失。排查时可以在开发者工具中查看最终计算样式。
文件名大小写也是一个常见坑。开发环境如果在Windows上，文件系统通常不区分大小写，bg.jpg和BG.JPG都能找到；但部署到Linux服务器后，文件系统区分大小写，路径就会失效。因此建议项目中的文件名统一使用小写，并在代码中保持一致。
响应式背景与性能优化建议
背景图片往往比普通内容图片体积更大，尤其是全屏背景图。如果直接给移动端加载一张1920px宽的图片，会浪费流量并拖慢首屏。更合理的做法是使用媒体查询，为不同屏幕宽度提供不同尺寸的背景图。下面这段CSS在小屏设备上加载较小的背景图，在大屏设备上加载高清版本。
body {
background-image: url(images/bg-mobile.jpg);
}
@media (min-width: 768px) {
body {
background-image: url(images/bg-desktop.jpg);
}
}
图片格式也影响性能。现代浏览器普遍支持WebP格式，它相比JPEG或PNG能在相近质量下显著减少体积。如果项目需要兼容旧浏览器，可以使用image-set()或@supports来做渐进增强。简单做法是准备WebP和JPEG两个版本，在CSS中默认使用JPEG，再通过媒体查询或浏览器判断替换为WebP。
对于需要固定背景的场景，移动端不建议使用background-attachment: fixed，因为部分浏览器会强制把图片放大到整个页面高度，造成模糊和滚动性能下降。可以用一个绝对定位的<div>放在内容后面，设置position: fixed; inset: 0;并加上背景图，这个方案在多数移动浏览器上表现更稳定。
<div class="bg-layer"></div> <main class="content"> <h1>页面内容</h1> </main>
.bg-layer {
position: fixed;
inset: 0;
background: url(images/bg.jpg) no-repeat center center / cover;
z-index: -1;
}
上面代码中，背景层使用position: fixed固定住，内容层正常滚动，这样既保留了固定背景的视觉效果，也避免了background-attachment的兼容性问题。需要注意z-index: -1可能让背景层被某些容器背景覆盖，实际使用时可设置更高的层级。
最后，背景图还应与背景色配合。图片未加载或加载较慢时，背景色可以先显示，减少空白感。同时，深色背景图需要使用白色文字，浅色背景图使用深色文字，保证可读性。在背景图上增加一层半透明遮罩是常用的设计手段，例如使用linear-gradient与背景图叠加，让文字更清晰。