Add instructions for background images reveal.js (#4325)

This commit is contained in:
John Muccigrosso 2018-03-13 12:17:46 -04:00 committed by John MacFarlane
parent 93228d594e
commit f921b38869

View file

@ -4384,6 +4384,47 @@ the [Beamer User's Guide] may also be used: `allowdisplaybreaks`,
`allowframebreaks`, `b`, `c`, `t`, `environment`, `label`, `plain`,
`shrink`.
Background in reveal.js
-----------------------
Background images can be added to self-contained reveal.js slideshows.
For the same image on every slide, use the reveal.js configuration
option `parallaxBackgroundImage` either in the YAML metadata block
or as a command-line variable. 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 slide, add `{data-background-image="/path/to/image"}`
to the first slide-level header 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 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](https://github.com/hakimel/reveal.js#slide-backgrounds)
for more details.
For example:
```
---
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 header has no content.
```
Creating EPUBs with pandoc
==========================