How do you add a background image for the toc slide in revealjs Quarto

Question

I have used the solution provided on Slide Background using images is not working in Quarto Reveal JS presentation to learn how to add slide background immages.

However, this solution doesn't work for toc (contents slide) since the toc slide is generated by yaml options and i dont see how to provide a background image for the toc slide.

I am using rtsudio and quarto.

How do you add a background image for the toc slide in revealjs Quarto?

Answer 1

You can use revealjs template partial toc-slide to modify the TOC (Table of Contents) slide.

The toc-slide.html file initially looks like this,

<section id="$idprefix$TOC">
<nav role="doc-toc"> 
$if(toc-title)$
<h2 id="$idprefix$toc-title">$toc-title$</h2>
$endif$
$table-of-contents$
</nav>
</section>

And, to add a background image to this slide, you just need to add an image file using data-background-image attribute in the section tag. Now you can create a YAML variable toc-bg-image in the quarto (.qmd) file to store the image link that you want to add as a bg image for the toc slide.

---
title: "Backgrounds"
format: revealjs
toc: true
toc-bg-image: "https://picsum.photos/id/870/200/300?grayscale"
template-partials:
  - toc-slide.html
---

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

And then use that variable in the toc-slide.html template partial. Note that the variable is wrapped within the $ sign.

<section id="$idprefix$TOC" data-background-image="$toc-bg-image$">
<nav role="doc-toc"> 
$if(toc-title)$
<h2 id="$idprefix$toc-title">$toc-title$</h2>
$endif$
$table-of-contents$
</nav>
</section>