Background images can be added to self-contained reveal.js slide shows, beamer slide shows, and pptx slide shows.
With beamer and reveal.js, the configuration option
background-image can be used either in the YAML metadata
block or as a command-line variable to get the same image on every
slide.
Note that for reveal.js, the background-image will be
used as a parallaxBackgroundImage (see below).
For pptx, you can use a reference doc in which background images have been set on the relevant layouts.
parallaxBackgroundImage (reveal.js)For reveal.js, there is also the reveal.js-native option
parallaxBackgroundImage, which produces a parallax
scrolling background. You must also set
parallaxBackgroundSize, and can optionally set
parallaxBackgroundHorizontal and
parallaxBackgroundVertical to configure the scrolling
behaviour. See the reveal.js
documentation for more details about the meaning of these
options.
In reveal.js’s overview mode, the parallaxBackgroundImage will show up only on the first slide.
To set an image for a particular reveal.js or pptx slide, add
{background-image="/path/to/image"} to the first
slide-level heading on the slide (which may even be empty).
As the HTML
writers pass unknown attributes through, other reveal.js background
settings also work on individual slides, including
background-size, background-repeat,
background-color, transition, and
transition-speed. (The data- prefix will
automatically be added.)
Note: data-background-image is also supported in pptx
for consistency with reveal.js – if background-image isn’t
found, data-background-image will be checked.
To add a background image to the automatically generated title slide
for reveal.js, use the title-slide-attributes variable in
the YAML metadata block. It must contain a map of attribute names and
values. (Note that the data- prefix is required here, as it
isn’t added automatically.)
For pptx, pass a reference doc with the background image set on the “Title Slide” layout.
---
title: My Slide Show
parallaxBackgroundImage: /path/to/my/background_image.png
title-slide-attributes:
data-background-image: /path/to/title_image.png
data-background-size: contain
---
## Slide One
Slide 1 has background_image.png as its background.
## {background-image="/path/to/special_image.jpg"}
Slide 2 has a special image for its background, even though the heading has no content.