Search code examples
quartoreveal.js

How to add images to the title page of quarto presentation?


In a quarto revealjs presentation using Rstudio, I want to add images of the project funders to the title page only. For example, one of the image should be on the left, and the other one on the right (the "1" and "2" on the image shown correspond to the approx. locations where I want to put the photos). Is this possible?

---
title: "Boring title"
format: revealjs
---

enter image description here

P.S.: Please note that I am aware of the logo option in quarto and this is not what I am looking for.


Solution

  • Use multiple backgrounds on the .title CSS class.

    ---
    title: "Boring title"
    format: revealjs
    css: style.css
    ---
    
    ## First Slide
    

    style.css

    h1.title {
      background-image: url(dog.jpg), url(lights.jpg);
      background-repeat: no-repeat;
      background-position: left, right;
      background-size: 200px, 200px;
    }
    
    

    two images added left and right side of a seemingly boring title