background-imagequartoreveal.js

Set background image in all slides (Quarto - revealjs)


I work with Quarto (via RStudio) and I work on a revealjs presentation. I would like to apply the same background image (from a .png file in the same directory as the qmd) to all slides (without having to specify it on each slide header).

The closest question on Stack Overflow is [this one][1]. The code provided in the answer works. But when I change this line :

background-image: url("https://i.imgur.com/8tcxHWh.jpeg");

to this :

background-image: "Background.png";

i.e., trying to point to a local file in the same directory as scss and qmd, it has no effect (no background image).

Does someone knows the answer to this ?


Solution

  • My previous solution was not so perfect so I found another one. I hope it can help someone some day.

    First, I created (or converted) my image into Inkscape and exported it to svg. I used Inkscape as it creates a nicely formatted svg when oppened with a text editor.

    After exporting, I opened the image with a text editor and I changed all the "width" and "height" parameters to % instead of px (or whatever finite distance unit you might have). For my image, the svg looked like this :

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!-- Created with Inkscape (http://www.inkscape.org/) -->
    
    <svg
       width="100%"
       height="100%"
       viewBox="0 0 338.66666 190.5"
       version="1.1"
       id="svg1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:svg="http://www.w3.org/2000/svg">
      <defs
         id="defs1" />
      <g
         id="layer1">
        <rect
           style="fill:#5ba500;fill-opacity:1;stroke-width:0.355287"
           id="rect1"
           width="100%"
           height="7.3%"
           x="0%"
           y="92.9%" />
        <rect
           style="fill:#00716d;fill-opacity:1;stroke-width:0.287288"
           id="rect1-7"
           width="100%"
           height="4.7%"
           x="0%"
           y="95.5%" />
      </g>
    </svg>
    

    This allows the background to be automatically rescaled to some extent (and especially, it fits the screen when in full screen mode).