Background images do not work with self contained documents

[DavZim]

When I create a reveal.js presentation with background images and send the file to someone else or copy the file to another folder (copying it to the same folder still works), all background images disappear.

In my case a simple reproducable error looks like this:

reveal-test.rmd

---
title: "Habits"
author: John Doe
date: March 22, 2005
output: revealjs::revealjs_presentation

---

# In the morning {data-background="background.jpg"}

After compilating the html-file and opening it (firefox or chrome in my case) everything works. After copying the file to another folder, all background images disappear. This includes background videos, but not websites or colors.

I got the error with both Ubuntu and Windows 7.

[junkka]

The html file is not fully self contained when using data-background as when using the default pandoc method ![background image](background.jpg) which includes the image into the html file. You need to copy all images to the same folder as your html file.

[cderv]

This is confirmed with pandoc 2.14.2 : Even with --self-contained, it will produce a document which has the background inserted as a style element

<div class="slide-background-content" style="background-image: url('background.jpg');"></div>

I believe this is because it happens on the client slide through reveal.js library and pandoc can't just encode those image path.

Single self-contained file could be difficult to produce when those attributes are used... 🤔

This needs to be check with Pandoc project

[cderv]

Ok now I know more about revealjs, it seems that one need to use data-background-image:

---
title: "Habits"
author: John Doe
date: March 22, 2005
output: revealjs::revealjs_presentation

---

# In the morning {data-background-image="background.jpg"}

Otherwise, Pandoc won't base64 encode the attributes.

data-background is more generic and won't get pick up by Pandoc, even if it is usable by revealjs.
This seems to be on purpose (jgm/pandoc@5164ecd).
However, data-background alone is not really documented: https://revealjs.com/backgrounds/

Code in Pandoc: https://github.com/jgm/pandoc/blob/8018179b3df34cd7fdbd77c7a08b21fd8d5b5b31/src/Text/Pandoc/SelfContained.hs#L57

data-background alone is not documented in Pandoc: https://pandoc.org/MANUAL.html#background-in-reveal.js-and-beamer

It seems reveal.js is guessing what to do when only data-background is used
https://github.com/hakimel/reveal.js/blob/56772afa32d481685157bc355422cb793f5a07ce/js/controllers/backgrounds.js#L151-L159

• it sets data-background-image if the value of data-background is starting by http or file or //, or if it ends by (svg|png|jpg|jpeg|gif|bmp)
• In other case it will be passed asis to the background style (for color I guess).

Anyway, I close this as it is working as documented