I am currently working on creating a title slide for a reveal.js presentation in Rstudio using quarto. My goal is to have a background image covering the entire slide and include one or more small icons at the bottom (specifically on this slide only). I have been experimenting with modifying this approach suggested for xaringan, but unfortunately, I have not achieved the desired outcome. Below you can see 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 also attempted changing the title-slide-attributes in order to add multiple images, but I was unable to find the correct syntax.
In response to @shafee's suggestion below, I experimented with:
---
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 problem arises when I separate reveal.js on its own line to include additional details like embed-resources. In this case, only the icon appears on the title slide. If I change the order of these, the background image displays (in color rather than grayscale) but the icon disappears. This issue persists regardless of whether the title-slide-attributes block is indented or not.