I'm using quarto's reveal.js implementation. I've been reading the official documentation page on customising themes and I'm relatively familiar with SCSS rules.
I've been able to create classes to slides and then customise them via SCSS rules. Regretfully, I haven't been able to add a custom background (either colour or, ideally, image background) to the first slide (#title-slide
) covering the entire area, as I would do in other regular slides as described here.
Is there any way to add custom backgrounds to the first slide other than this hack consisting of leaving the presentation's attributes blank?
EDIT:
Not sure if that's the right approach, but I tried adding the background-image url in the yaml metadata and it works:
---
title: "My title"
background-image: "https://images.unsplash.com/flagged/photo-1580139624070-910f651c1b78?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
background-opacity: "0.45"
format:
revealjs:
theme: [default]
logo: images/logo_black.png
editor: visual
---
Regretfully, properties such as background-color
and background-opacity
don't work.
Just for the record, after @tarleb's comment pointing me to pandoc's documentation, I made it work by adding this on yaml's metada:
---
[...]
title-slide-attributes:
data-background-image: "/path/to/image"
data-background-size: contain
data-background-opacity: "number"
[...]
---
As can be seen, other attributes can be passed, as long as
title-slide-attributes
data-