Html 为四开本网站主页添加背景图片

在Quarto网站中，我如何添加填充整个页面但仅填充到主页的背景图像？

我有一个工作的解决方案，添加正确的背景，但它在整个网站上.在下面的示例中，我不希望报表页具有背景图像.它应该有一个纯白色的背景，导航栏和页脚.

可重复使用的例子.正在创建以下文件:

_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;
  /*background-position: center center;*/
  /*background-attachment: fixed;*/
}

跑quarto preview

可能的解决方案是，仅在主页上的特定类的Body div之前或之后添加一个div，并以该类为目标.我不太确定该如何着手做那件事.

我试了include-before-body，但那不包括导航栏和页脚.

更新的_quarto.yml部分个

format:
  html:
    theme: "styles.css"
    include-before-body: before.html
    include-after: after.html

before.html个

<div class="splash">

after.html个

</div>

Update styles.css个*

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

Quarto 1.2.1个