CODEWITHSUNDEEP
quartoreveal.js
Claudio
Claudio

Reputation: 1550

Background image in all slides in reveal (Quarto markdown)

I want to add an image as background in all the slides except the title slide of a revealjs presentation created with Quarto markdown. So far I have gotten to:

## Title {background-image="image.jpg"}

I have two problems:

  1. The background image is correctly sized in normal mode, but when I go in presentation mode its size changes and becomes larger compared to the slide area. Is there a way to have the same size compared to slide size in both normal and presentation mode?
  2. Is there a mode to add the background image without having to specify it in all slides? I tried to put background-image: image1.jpg in YAML, but then the image is not resized and does not show completely in the slide. I tried with background-size: cover but it has no effect.

Upvotes: 2

Views: 2183

Answers (1)

polksmash
polksmash

Reputation: 31

Let's tackle the slides you want to have a background image on first:

You'll want to create a styles.scss file in the same folder as the .qmd file. In that theme you'll declare the background image as shown below. Replace the image URL as needed, and adjust the percentages (first handles horizontal fit, second vertical) until you're happy with the fit.

styles.scss contents:

/*-- scss:defaults --*/

/*-- scss:rules --*/
.slide-background-content{
  background-image: url("https://i.imgur.com/8tcxHWh.jpeg");
  background-size: 100% 100%;
}

Because you're wanting the title slide to be different from the rest, you can use the YAML fields in your .qmd document to set it apart. First off, make sure you at least have a title in the YAML for this to work. Here are some other options available.

While we're working with he YAML, we also need to declare our new styles.scss file in this area so it knows to take instructions from there. Feel free to change the data-background-color with a hex code of your choosing. You need the data-background-image: none piece to ensure the background in the other slides doesn't show up in the title slide.

Suggested minimal YAML contents for index.qmd

---
title: "A title slide"
format:
  revealjs: 
    theme: [default, styles.scss]
    title-slide-attributes: 
      data-background-color: "#4e4e4e"
      data-background-image: none
---

Upvotes: 3

Related Questions