背景图加不上主要是路径错误或误用<img>标签；必须用CSS的background-image属性，配合background-size: cover等设置，并确保路径准确、协议匹配。
背景图片加不上，八成是路径写错了，或者没用 background-image 而用了 <img> 标签——这两者完全不是一回事。
为什么 <img> 标签插不出“背景图”
很多人拖一张图进编辑器，随手写个 <img src="bg.jpg">，发现它只是页面里多了一张图，没法铺满、没法固定、文字一放就盖不住——因为 <img> 是内容元素，不是背景。真正做背景，必须用 CSS 的 background-image。
-
<img>是 HTML 元素，会参与文档流，占空间、可选中、能加 alt -
background-image是 CSS 属性，作用在某个容器（比如<body>或<div>）上，不占布局空间，文字默认浮在上面 - 想让背景铺满整个页面？得配
background-size: cover或100% 100%，光写background-image不行
路径写错是最常见的失败原因
浏览器找不到图，控制台会报 GET http://localhost/bg.jpg 404 (Not Found)。不是图坏了，是路径不对。本地文件系统里双击打开 HTML，用的是 file:// 协议，路径规则和服务器不同。
- 图和 HTML 在同一目录：直接写
background-image: url("bg.jpg"); - 图在
images/子目录：写url("images/bg.jpg")，别写url("./images/bg.jpg")——.在file://下常失效 - 绝对路径慎用：
url("/images/bg.jpg")在本地双击打开时会找 C 盘根目录，基本 404 - 路径区分大小写，
BG.JPG和bg.jpg在 macOS/Linux 就是两个文件
最简可用的背景图写法（含防坑配置）
直接贴一段能跑通的代码，复制粘贴就能看到效果，关键参数都带注释：
立即学习“前端免费学习笔记（深入）”；
body {
margin: 0;
background-image: url("bg.jpg"); /* 确保文件名和路径准确 */
background-size: cover; /* 关键！否则只显示左上角一小块 */
background-position: center; /* 居中裁切，避免偏移 */
background-repeat: no-repeat; /* 默认会平铺，关掉 */
background-attachment: fixed; /* 可选：滚动时背景不动（视差效果） */
}- 一定要给
body加margin: 0，否则默认外边距会让背景留白 -
background-size: cover和contain效果不同：cover强制填满、可能裁边；contain完整显示、可能留白 - 如果背景还是不显示，右键网页 → “检查” → 切到 “Network” 标签，刷新看
bg.jpg是否状态为 200
用在线图床测试时要注意协议问题
有人试过用图床链接（比如 https://xxx.com/bg.jpg），结果空白——浏览器可能因混合内容（HTTP 页面加载 HTTPS 图）或 CORS 拦截而拒绝加载。
- 确保你的 HTML 文件也是
https://开头（比如托管在 GitHub Pages、Vercel），再引用 HTTPS 图片 - 本地
file://协议下，绝大多数图床链接会因安全策略被屏蔽，连请求都不会发出去 - 调试阶段，老老实实用本地文件，确认逻辑没问题再换线上地址
背景图看着简单，但路径、协议、CSS 组合这三块任何一个出错都会静默失败——没有报错，只有空白。盯着控制台 Network 面板看请求是否发出、状态码是多少，比反复改代码更快。
