Custom background in title-slide using quarto's reveal implementation
Asked Answered
D

1

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.

Dorr answered 6/7, 2022 at 14:5 Comment(2)
Using background-image is a good approach. It is documented in the pandoc manual that (mostly) applies to quarto as well.Love
Thank you very much for pointing me that! Following the document I made it work and I managed to apply other properties, too!Dorr
D
13

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-
Dorr answered 7/7, 2022 at 7:11 Comment(1)
PS: added a PR with this info so this can be added to quarto's official documentation: github.com/quarto-dev/quarto-web/pull/251Dorr

© 2022 - 2024 — McMap. All rights reserved.