In Quarto (RStudio), in a reveal JS presentation, I would like to add a background image to all slides and stretch (or squeeze) it in both direction to fit the image size to slide size in such a way that even when the size of the browser window is resized, the background image is also resized like the text.
In this reference, it is stated that “Background images created with the element() function use the intrinsic dimensions and proportions of the generating element.”. I understand that I can achieve this by specifying a svg image with no intrinsic dimension.
Can someone :
- explain to me how to remove the intrinsic dimension from an svg file
- demonstrate how to use element() in css for the below dummy .qmd
Here is an example .qmd with a link to a dummy svg.
---
title: "Untitled"
format:
revealjs:
background-image: "https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg"
background-size: cover
---
## Example
When I run it, even with background-size: cover, the image is repeated to fill the space. Also note that if you resize the browser, the background image does not resize. See three example of window size of my browser (average, full screen and smaller):
