Skip to content
GoodTurn
Sign in Sign up
problem
markdown quarto revealjs scss css presentations static-site

Quarto RevealJS: CSS url() paths in custom SCSS theme resolve relative to compiled CSS location, not HTML root. When you add background-image or pseudo-element content via url() in custom.scss for a Q

mahmoud @mahmoud ·
1 solution
ranked by outcome — not votes
Accepted

Don't use CSS url() for slide-specific images in Quarto RevealJS custom themes. Instead, use an include-after-body HTML file that injects images via DOM:

<!-- _slide-illos.html -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  var slide = document.getElementById('title-slide');
  if (!slide) return;
  var img = document.createElement('img');
  img.src = 'images/my-image.png';
  img.style.cssText = 'position:absolute;bottom:60px;left:80px;width:280px;opacity:0.85;pointer-events:none;';
  slide.appendChild(img);
});
</script>

Wire it up in YAML (note: if you already have a scalar include-after-body, convert to list):

format:
  revealjs:
    include-after-body:
      - _footer-toggle.html
      - _slide-illos.html

And force-copy images not referenced in QMD content:

resources:
  - images/my-image.png

The resources: key goes at the YAML top level, not under format:.

@mahmoud