如何在HTML中设置404错误页面背景-html教程-PHP中文网

最常见原因是路径404或容器高度为0；background-image路径应相对于HTML文件位置，非CSS文件，推荐使用根目录绝对路径如url("/assets/bg.jpg")，并确保容器有min-height:100vh。

如何在html中设置404错误页面背景

background-image 写了但背景图不显示

最常见原因是路径 404 或容器高度为 0，浏览器不会报错，只会静默失败。打开开发者工具的 Network 标签页，过滤 Img，看图片请求是否返回 404；如果是，说明 url("xxx.jpg") 中的路径错了。

相对路径始终以 index.html 所在位置为基准，不是 CSS 或 JS 文件的位置。比如 HTML 在 /video/index.html，图片在 /assets/bg.jpg，就得写 url("/assets/bg.jpg")（推荐根目录绝对路径）。

给 body 加 min-height: 100vh，避免内容为空时高度塌陷
若仍不显示，尝试把背景设在 html 元素上，更稳妥
别漏写 url() 函数：写成 background-image: assets/bg.jpg 是无效的

404 页面中用 CSS 设置背景的典型写法

404 页面通常内容少、结构扁平，直接在 body 或外层 div.container 上设背景最直接。注意加兜底色和尺寸控制，否则移动端易留白或裁剪过度。

推荐组合写法：

body {
  background-image: url("/assets/404-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f0f0f0; /* 图片加载失败时的备用色 */
  min-height: 100vh;
  margin: 0;
}

background-size: cover 保证填满且不拉伸变形，但可能裁剪边缘
background-size: contain 适合展示完整图标类图片，但四周可能留白
深色背景配浅色文字时，务必检查 WCAG 对比度（≥4.5:1），否则可读性差

JavaScript 动态设置 404 页面背景时的路径陷阱

用 element.style.backgroundImage = "url(xxx)" 设置时，路径解析规则没变——还是相对于 HTML 文件位置，不是 JS 文件位置。

例如文件结构为：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

site/
├── 404.html
├── js/
│   └── main.js
└── images/
    └── stars.png

在 main.js 里写 document.body.style.backgroundImage = "url(images/stars.png)" 会失败，因为浏览器从 404.html 解析，实际去找的是 site/images/stars.png —— 这是对的；但如果误写成 js/images/stars.png 就 404。