7

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.

ccamara
  • 1,141
  • 1
  • 12
  • 32
  • 1
    Using `background-image` is a good approach. It is [documented](https://pandoc.org/MANUAL#on-all-slides-beamer-reveal.js-pptx) in the pandoc manual that (mostly) applies to quarto as well. – tarleb Jul 06 '22 at 16:53
  • Thank you very much for pointing me that! Following the document I made it work and I managed to apply other properties, too! – ccamara Jul 07 '22 at 07:12

1 Answers1

11

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

  1. they are indented under title-slide-attributes
  2. they are prepended with data-
ccamara
  • 1,141
  • 1
  • 12
  • 32
  • 1
    PS: added a PR with this info so this can be added to quarto's official documentation: https://github.com/quarto-dev/quarto-web/pull/251 – ccamara Jul 07 '22 at 07:42