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 senior developer evangelist for Adobe. He focuses on document services, JavaScript, 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 https://www.raymondcamden.com

Archived Comments

Comment 1 by Marco posted on 8/25/2012 at 9:49 AM

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!

Comment 2 by JB posted on 12/6/2012 at 8:28 PM

Marco, if you get that working, would you mind posting as an example to others? Cheers

Comment 3 by Aaron posted on 2/28/2013 at 8:14 PM

Thanks. This was exactly what I was looking for!

Comment 4 by Emiliano Viada posted on 5/8/2013 at 12:10 AM

Thanks dude! Very helpful...

Comment 5 by Terry Ryan posted on 6/11/2013 at 12:26 AM

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.

Comment 6 by alessandro posted on 9/15/2013 at 3:14 PM

in which css file did you put this stuff?

Comment 7 by Raymond Camden posted on 9/15/2013 at 6:47 PM

@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.

Comment 8 by kensley lewis posted on 3/26/2020 at 8:26 PM

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?

Comment 9 (In reply to #8) by Raymond Camden posted on 3/26/2020 at 8:31 PM

Did you see the note on the very top? They added various data-* attributes to support background. Check the docs on that.