Search code examples
pandocreveal.jsquarto

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


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.


Solution

  • 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-