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.
This defines a background image with a CSS
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).
Leave a Reply