如何为Quarto网站首页添加全屏背景图片

问题描述 #

现有Quarto网站设置了全屏背景图片，但该背景会应用到所有页面（包括report页面）。需求是仅首页显示全屏背景，report页面使用纯白背景，保留导航栏和页脚。

可复现初始代码 #

以下是初始的项目文件结构及代码：

_quarto.yml #

project:
  type: website

website:
  title: "Sunset Sea"
  navbar:
    background: transparent
    left:
      - text: Home
        href: "index.html"
      - text: Report
        href: "report.html"
  page-footer:
    border: false
    background: transparent
    foreground: DimGray
    left: Left content
    right: Right content

format:
  html:
    theme: "styles.css"

index.qmd #

---
format: html
---

# Sunset Sea

Welcome to Sunset Sea.

report.qmd #

---
title: "Report"
format: html
---

## Heading 1

This is a report

styles.css #

/*-- scss:defaults --*/

body {
  background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}

解决方法 #

通过给首页添加自定义页面类，结合CSS定向控制背景显示，具体步骤如下：

1. 修改首页（index.qmd）的元数据 #

在首页的YAML中添加自定义HTML类，用于标识首页：

---
format:
  html:
    html-class: "home-page"
---

# Sunset Sea

Welcome to Sunset Sea.

2. 更新styles.css样式文件 #

调整CSS规则，仅为带home-page类的页面设置背景，同时让其他页面使用纯白背景：

/*-- scss:defaults --*/

/* 首页全屏背景设置 */
.home-page body {
  background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh; /* 确保背景铺满整个视口高度 */
}

/* 非首页设置纯白背景 */
body:not(.home-page) {
  background-color: white;
}

/* 保持导航栏和页脚透明（延续原有设置） */
.navbar, .page-footer {
  background: transparent !important;
}

原理说明 #

• 通过html-class给首页的HTML根元素添加专属类，让CSS可以精准定位首页。
• 直接为首页的body设置背景，确保背景覆盖整个页面区域（包括导航栏和页脚所在的范围），解决了之前使用include-before-body无法覆盖导航栏/页脚的问题。
• 使用body:not(.home-page)规则，为所有非首页页面设置纯白背景，满足report页面的需求。

内容的提问来源于stack exchange，提问作者mindlessgreen