How can I add a background image to fill the entire page on the home page only in a Quarto website?
I currently have a solution that adds the background image, but it applies it across the entire website. In this case, I want to exclude the report page from having the background image and keep it with a plain white background, navbar, and footer.
To reproduce this issue, create 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
body {
background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
Run quarto preview
Possibly, one solution is to add a specific div before or after the body div on the homepage only, and then target that div with CSS. How exactly to do this is unclear to me at the moment.
I attempted using include-before-body, but that didn't include the navbar and footer as needed.
Update the relevant section 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