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).
Leave a Reply