Background in reveal.js and beamer
Background images can be added to self-contained reveal.js slideshows and to beamer slideshows.
For the same image on every slide, use the configuration option background-image
either in the YAML metadata block or as a command-line variable. (There are no other options in beamer and the rest of this section concerns reveal.js slideshows.)
For reveal.js, you can instead use the reveal.js-native option parallaxBackgroundImage
. You can also set parallaxBackgroundHorizontal
and parallaxBackgroundVertical
the same way and must also set parallaxBackgroundSize
to have your values take effect.
To set an image for a particular reveal.js slide, add {data-background-image="/path/to/image"}
to the first slide-level heading on the slide (which may even be empty).
In reveal.js’s overview mode, the parallaxBackgroundImage will show up only on the first slide.
Other reveal.js background settings also work on individual slides, including data-background-size
, data-background-repeat
, data-background-color
, data-transition
, and data-transition-speed
.
See the reveal.js documentation for more details.
For example in reveal.js:
---
title: My Slideshow
parallaxBackgroundImage: /path/to/my/background_image.png
---
## Slide One
Slide 1 has background_image.png as its background.
## {data-background-image="/path/to/special_image.jpg"}
Slide 2 has a special image for its background, even though the heading has no content.