Search code examples
cssrstudioquartoreveal.js

Full coverage background image on quarto title slide with a row of icons along the bottom

I am trying to make a title slide for a reavaljs presentation using Rstudio and quarto. I would like my title slide to have full coverage background image and one or more small icons along the bottom (but not on other slides). I have attempted to modify this method suggested for xaringan, but have not had any success. Here is my .qmd YAML and css:

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    embed-resources: true
    css: css/slides.css
editor: source
---

slides.css

.title-slide {
  background-image: url(https://placeholder.pics/svg/100),
                    url(https://picsum.photos/id/870/800/600?grayscale);
  background-position: 2% 98%, center;
  background-size: 100px, cover;
}

I have also tried altering the title-slide-attributes to provide multiple images, but could not find a syntax that worked.

Based on the response by @shafee below, I tried:

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    theme: night
    embed-resources: true
    title-slide-attributes: 
      data-background-image: "https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale"
      data-background-size: 100px, cover
      data-background-position: 2% 98%, center
editor: source
---

The issue is that when I pull revaljs out on its own line so that I can include other details such as embed-resources, only the icon shows up on the title slide. If I reverse the order of these, the background image shows up (in color instead of grayscale) but the icon is not present. The same behavior happens regardless of whether the title-slide-attributes block is indented or not.

Solution

  • You can do the same for Quarto revealjs too using title-slide-attributes.

    Just pass the image path in a string (comma separated).

    ---
title: "Test Presentation"
author: "Name"
format: revealjs
title-slide-attributes: 
  data-background-image: "https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale"
  data-background-size: 100px, cover
  data-background-position: 2% 98%, center
  
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation.

## Bullets

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

-   Content authored with markdown
-   Output from executable code

    title slide background