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.

Dak

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.

Byelaw

Thank you! That does seem to be a lot nicer than what I was trying to do! – Dak

Hmm - I'm actually having some trouble with this. The height and width don't seem to be changing the image size, and it also seems to have the added side-effect that the slide numbers are also now moved up to the top of the slides... – Dak

slide number is placed by default at top righr corner. Its not a side effect of this solution. – Byelaw

Ah - thanks, I didn't realize that !important would be needed. I think that the default for the slide numbers had been bottom right when there was no logo at all, so maybe adding the logo and changing the location still changes them? I think there had been a slide-number location option somewhere, so that should be changeable... – Dak

Oh, in that case, yes, it should be changeable. If you want to keep the slide number in the bottom right corner, I think you need to find the class selector for the slide number and apply CSS rule on that – Byelaw