Full Screen Image in Reveal.js

As a programmer with no real background in design, I like tools that look good by default. To that end, when presenting I like to use reveal.js to build my slide deck.

While reveal.js is a terrific tool, there are times I want to do things a little differently. For example, there are times I want to use a full screen image. While I can set a background image by defining it in the section tag, e.g.

<section data-background="images/my-image.jpg">

This defines a background image with a CSS background-size of cover. Typically, cover works best with a background image because it makes certain to cover the whole area, even if that involves cropping the image.

However, in my case, I want to cover as much of the area as possible without cropping the image. To get this behavior, I would change the CSS to background-size: contain. The problem that occurs is we don’t manually create the container for the background-image (notice, we’re setting data-background, which reveal.js then uses to create an element and adds the background image to that element). This means I could make this CSS change but it would apply to ALL background images, which is not what I want.

Thanks to Steve Grunwell for pointing out I can use the attribute data-background-size="contain" on my slide to get a full screen image in Reveal.js (Documentation).

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.