Background colors

Background colors for slides can be specified by two means: a classic one and one using AsciiDoc roles. See background-color.adoc for more examples.

Using AsciiDoc roles

Using roles respects the AsciiDoc philosophy of separation of content and presentation. Colors are to be defined by CSS and the :customcss: attribute need to be used to specify the CSS file to load. To avoid clashing with existing reveal.js themes or CSS, a specific CSS class called background is expected to be present. Here is an example:

= Title
:customcss: my-css.css

== Slide One

Is very red
my-css.css {
  background-color: red;
The canvas keyword can be used instead of background for the same effect.


== Slide Three

Is very yellow

Slide Three applies the attribute data-background-color to the reveal.js <section> tag. Anything accepted by CSS color formats works.

Background images

== Grand Announcement

image::cover.jpg[background, size=cover]

This will put cover.jpg as the slide’s background image. It sets reveal.js’ data-background-image attribute. The size attribute is also supported. See the relevant reveal.js documentation for details.

Background images file names are now relative to the :imagesdir: attribute if set.
The canvas keyword can be used instead of background for the same effect.
== The Great Goat


As you can see, you can use a URL to specify your image resource too.

Background videos

A background video for a slide can be specified using the background-video element attribute.

== Nice background!

For convenience background-video-loop and background-video-muted attributes are mapped to loop and muted options which can be specified with options="loop,muted".

For example:

== Nice background!

See the relevant reveal.js documentation for details. Note that the data- prefix is not required in AsciiDoc files.

Background iframes

The background can be replaced with anything a browser can render in an iframe using the background-iframe reveal.js feature.

== a youtube video