id选择器中background-image不生效，主因是路径错误（需相对于CSS文件位置）、未加引号、图片不存在、元素无宽高、被内联样式覆盖或未设置background-size/repeat等。

id选择器里 background-image 不生效？先看路径和引号

直接写 #header { background-image: url(logo.png); } 很可能没反应——不是语法错，是路径或引号惹的祸。

• 路径必须相对于 CSS 文件位置，不是 HTML 文件位置；如果 CSS 在 /static/css/style.css，而图片在 /static/img/bg.jpg，就得写 url(../img/bg.jpg)
• url() 里的路径**必须加引号**（单/双均可），尤其含空格或特殊字符时：url("bg header.jpg")，不加引号在部分浏览器会静默失败
• 确保图片文件真实存在且服务器可访问；用浏览器开发者工具的 Network 标签页查 404 请求，比猜快得多

background-size 和 background-repeat 必须手动设

默认情况下，背景图会平铺（repeat）且不缩放（auto），常导致只显示左上角一小块或密密麻麻重复。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 想铺满整个元素：加 background-size: cover; 或 contain，再配 background-repeat: no-repeat;
• 想居中显示：补 background-position: center;，否则默认从左上角开始贴
• 简写更稳：background: url("../img/hero.jpg") no-repeat center / cover; —— 这一行顶五句，顺序不能乱

id 选择器优先级高，但会被内联 style 覆盖

如果 HTML 里写了 <div id="banner" style="background-image: none">，CSS 里再怎么写都无效。 <ul> <li>检查元素计算样式（Computed tab），看 <code>background-image 最终值是不是 none 或空字符串

内联样式优先级高于所有外部 CSS，包括 id 选择器；真要覆盖，得用 !important（慎用）或改 HTML

别忘了元素本身宽高是否为 0：#banner 如果没内容、没设 height 或 min-height，背景图有也看不见

现代写法推荐：用 background-image + :has() 做条件加载（需注意兼容性）

纯 id 选择器没法“根据是否有图片动态切换”，但可以配合伪类做轻量降级。

立即学习“前端免费学习笔记（深入）”；

• 比如希望图片加载失败时显示纯色背景：#hero { background-color: #f0f0f0; background-image: url("../img/hero.webp"); } —— 浏览器自动 fallback 到 color
• 想支持 WebP 但兼顾旧浏览器？用 <picture></picture> 不适用于背景图，此时老实用两套 CSS 或 JS 检测后加 class
• :has() 可以写 #card:has(img.loaded) { background-image: none; }，但目前仅 Chromium 117+ 支持，生产环境慎用

实际项目里，90% 的背景图失效问题出在路径拼错或元素没尺寸。打开 DevTools，点中元素，盯着 Styles 面板里 background-image 那行有没有红色波浪线、Computed 里 src 是不是 404，比翻文档快得多。