Add background image to quarto website home page

Question

In a quarto website, how do I add a background image filling the entire page but only to the home page?

I have a working solution which adds the background correctly, but does it across the entire website. In the example below, I do not want the report page to have the background image. It should have a plain white background, navbar and footer.

Reproducible example. Creating the following files:

_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;*/
}

Run quarto preview

Possibly a solution is to add a div just before or after the body div with a specific class only on the home page and target that class with css. I am not quite sure how to go about doing that.

I have tried include-before-body but that does not cover navbar and footer anyway.

Updated part of _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

shafee · Accepted Answer · 2023-03-05T14:48:04.407

index.qmd and Report.qmd will generate two different webpages. So if you want to add any style specific to index.html define the css styles (within style tag) in the index.qmd directly, instead of style.css.

index.qmd

---
format: html
---

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


# Sunset Sea

Welcome to Sunset Sea.

style.css

(do not specify the background images in the style.css)

/*-- scss:defaults --*/

Add background image to quarto website home page

1 Answers1