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 ?
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).