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.