Adding a logo at top-left corner for all slides in quarto presentation

Question

I'm trying to create a slideshow using rstudio's implementation of quarto, and I'd like to have a common icon in the top left of all non-title-slides in the show. (I'd also like it to be on the title slide, but that I've got figured out!)

On a single slide, I can use {background-image="logo.png" background-size=15% background-position="0% 0%"} and that works fine for that slide.

In the YAML,

data-background-image: ./logo.png
data-background-size: 15%
data-background-position: 0% 0%

does perfectly for the title slide. If I use

background-image: logo.png
background-size: 15%
background-position: 0% 0%

I get the right image on all slides, but it's taking up the entire slide, not respecting the size argument.

Any suggestions on how to handle this? Maybe the background isn't actually the right way to do this since it's just a logo, but this seemed like it might be easier than trying to change the properties of the "logo" in quarto, since I don't see any options to change the size of that either.

Answer 1

---

Update: I have written a quarto filter extension reveal-header to add a header logo in top-left corner of all slides with header-logo option in yaml, which is probably an easier option than the approach described below.

---

Old Answer

If you want to add a logo for all slides (including the title slide) you can do this more easily by adding a logo via logo YAML key and tweaking the CSS property for that logo image.

---
title: "Untitled"
format: 
  revealjs:
    slide-number: true
    logo: placeholder.png
    css: logo.css
---

## Quarto

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/>.

logo.css

.reveal .slide-logo {
  display: block;
  position: fixed;
  bottom: unset !important;
  right: unset !important;
  top: 5px;
  left: 12px;
  height: 100px !important;
  width: 100x !important;
  max-width: unset !important;
  max-height: unset !important;
}

---

---

change the height and width css property as you need.