Search code examples
rstudiopandocreveal.jsquarto

Slide Background using images is not working in Quarto Reveal JS presentation

Problem Statement

Using Rstudio to create a RevealJS presentation, I can not get it to change the background to an image no matter what I do.

What Works and Doesn't Work

## title {background-image = "URL or file.extension" }

or

{data-background-image= }

doesn't work, while

{background-color= }

does.

I've been trying several media types - png, jpeg, gif. Both URLs and local files located in the project's main folder. All of those images load just fine in my browser.

What I get instead is a title slide where the title just include the bracketed expression:

screenshot of Rstudio

I would like to also use a GIF as a background image on the title slide. This was what I originally set out to do, and gradually I understood that even the simple slide background image does not work as shown in Quarto's website examples.

Session Info

> sessionInfo() 
R version 4.1.1 (2021-08-10) 
Platform: x86_64-w64-mingw32/x64 (64-bit) Running under: Windows 10 x64 (build 19044)

> RStudio.Version() 

$mode "desktop" 

$version ‘2022.7.1.554’

$long_version "2022.07.1+554"

$release_name "Spotted Wakerobin"
Solution

  • Do not use space on either side of equal sign (i.e. =) when specifying a background attributes.

    This is true for background-image, background-color or any other Slide background attributes

    MWE

    ---
title: "Backgrounds"
format: revealjs
---

## Quarto {background-image="https://placeholder.pics/svg/500"} 

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.

## Bullets {background-color="red"}

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code