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.

Archived Comments
Thanks for that.
Well, I used the '.state-background' div that sits on top of the markup in the index.html. This causes the image to smoothly zoom in as you change the slide.
But somehow it jumps to 100% quickly if it is smaller than the viewport. Currently I'm looking to have a CSS3 fadeIn effect on it. ...researching!
Marco, if you get that working, would you mind posting as an example to others? Cheers
Thanks. This was exactly what I was looking for!
Thanks dude! Very helpful...
There is also a plugin that will do this for you: https://github.com/regisb/r...
It has a few advantages over doing it manually in the CSS. It allows you to but the reference to the image in the HTML. This sorta gets closer to the ideal of having this type of image in the content instead of the presentation.
in which css file did you put this stuff?
@alessandro: Any really. Does it matter? I'd probably avoid the main reveal CSS so as to not mess with it. I believe in this case I just put it in the index.html file.
Thanks for initiating this topic. Is there anyway we can see what a background position alignment process should look like for reveal.js code today in 2020?
Did you see the note on the very top? They added various data-* attributes to support background. Check the docs on that.