Adding a background image to a reveal.js presentation

This post is more than 2 years old.

Edit on August 1, 2013: Since the time I wrote this blog post, Reveal.js has added a much easier way to add background images to slide. You should not do what I described below in the original blog entry, but instead, use the new method. You can now use data-background="rgb color or file" as well as data-background-repeat and data-background-size.

I've begun a new presentation (HTML5 Storage for RIACon and decided to give reveal.js a try. I'm very much on the fence about whether or not I like HTML-based presentations, but I thought I'd give it a shot. One thing that confused me was how to set a background image for a slide. The docs say this:

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This let's you apply broader style changes, like switching the background.

That seems sensible, right? But while it is was trivial to add data-state="something" to a slide, I couldn't figure out the exact CSS for setting the background. As far as I could tell, there wasn't an example of this anywhere. Luckily John Wish gave me a hand on Twitter.

Given a data-state="intro", here is the CSS you would use:

In order to make text readable, you could do something like this as well:

Here's a screen capture. Note that the image isn't the highest quality, but, it's kind of a joke anyway so I'm not too concerned about it.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA