最稳方式是直接修改~/.jupyter/custom/custom.css:通过完整设置background-image、background-size: cover、background-position: center center、background-attachment: fixed、background-repeat: no-repeat和background-color实现背景图全局生效,并用rgba()降低容器背景透明度以透出背景,最后硬刷新(Ctrl+Shift+R)并验证CSS加载。

直接改 custom.css 是最稳的方式
Jupyter Notebook 本身不提供“上传背景图”按钮,所有界面级视觉定制都依赖 CSS。只要修改 ~/.jupyter/custom/custom.css 文件,就能生效——而且是全局生效(所有 notebook 都用同一套样式)。别试图在 notebook 单元里用 HTML 或 Markdown 插图,那只是内容区图片,不是页面背景。
body 的 background 属性必须写全
只写 background: url(...) 很容易失效,因为缺了关键控制项。实际要用这组组合:
-
background-image: url("https://example.com/bg.jpg");—— 推荐用绝对 URL,本地路径需确保是 web 可访问路径(比如放~/.jupyter/custom/下再用url("./bg.jpg")) -
background-size: cover;—— 让图拉伸填满,避免留白或重复 -
background-position: center center;—— 居中对齐,防止偏移 -
background-attachment: fixed;—— 滚动时背景不动,观感更稳(不加的话滚动会“拖拽”背景) background-repeat: no-repeat;-
background-color: #f5f5f5;—— 图片加载失败时的兜底色,别留透明(否则可能透出浏览器默认灰)
注意容器层叠和透明度陷阱
背景图虽然设在 body,但真正挡住它的往往是几个核心容器:notebook 区、侧边栏、菜单栏。它们默认是纯白不透明,结果就是你只看到一窄条背景图,其余全是白块。必须显式降低它们的 opacity 或用半透色覆盖:
div#notebook-container.container { background-color: rgba(255, 255, 255, 0.85); }div#tree-container { background-color: rgba(255, 255, 255, 0.85); }#menubar-container { background-color: rgba(255, 255, 255, 0.9); }
数值别设太低(0.6 以下文字易看不清),也别用 opacity 属性——它会让子元素(比如代码、文字)也变透明,得用 rgba() 控制背景色本身。
改完要硬刷新,且留意缓存
保存 custom.css 后,仅刷新 notebook 页面大概率看不到变化——浏览器常缓存 CSS。必须做两件事:
- 关闭所有 Jupyter 标签页,重启
jupyter notebook进程 - 打开页面后按
Ctrl+Shift+R(Windows/Linux)或Cmd+Shift+R(macOS)强制重载全部资源 - 如果仍不生效,检查浏览器开发者工具(F12 → Network → Filter “custom.css”),确认加载的是你刚保存的文件,而不是旧缓存版本
路径拼错、URL 返回 404、CSS 语法少分号,这三类问题占调试时间 80%。先确保 custom.css 能被正确读取,再调样式。


















