tl;dr - use a slide state of "something" and then html.something .slide-background { opacity: 0.1 !important; }.

I used to be a big fan of reveal.js, but stopped using it after a while when I ran across too many instances of having to fight it's built in styling to get what I wanted. Don't get me wrong, I loved it, and thought it was a great tool, but somethings seemed unnecessarily difficult. I switched to Powerpoint and Keynote because, frankly, it was just simpler.

For an upcoming talk (NativeScript Developer Day) I thought I'd give it a try again. Ten minutes in to working on my slide deck I ran into a problem. Reveal makes it easy to add backgrounds to slide - including colors, pictures, and videos. I used the following code to set up a slide with a background image.


<section data-background="programming.jpg">
	<h1>Programming</h1>
</section>

And it worked, but the result was a bit hard to read:

First version

The obvious (well, to me and my design-challenged brain) solution was to reduce the opacity on the background image. Reveal doesn't have that baked in, and when I first suggested it be added, I was directed to the "states" feature. Basically, you add data-state="foo" to a slide and Reveal will apply that as a class to the "document" (more on why that's in quotes in a bit) when it is active.

Ok... so that's easy:


<section data-background="programming.jpg" data-state="dimbg">

But then I needed to figure out how in the heck to set the opacity. As far as I know, Reveal doesn't give you directions on what CSS classes are being used to render your presentation. Certainly you can just use Dev Tools, but yeah, even than you have to dig quite a bit to figure it out.

After some Googling, I came across the solution in a StackOverflow post. You can address the current background like so:


html.something .state-background {
    background-color: rgba(0,0,0, 0.8);
}

So first off, when the Reveal docs said it applied the custom CSS to the document, I had assumed body. I wish it had made it clear they meant the html tag. (Is that obvious to everyone else?)

So given that - I tried setting the opacity:


html.dimbg .slide-background {
	opacity: 0.2;
}

And... Reveal said psyche! Yeah, I dug a bit more into Dev Tools and noticed another class applying opacity. Well, I don't know CSS very well, but I know how to make my crap take precedence:


html.dimbg .slide-background {
	opacity: 0.2 !important;
}

Here is the result:

Second version

Much better. I am a CSS God! (Ok, not really, but I'm going to pretend for a few minutes until I need to center something and begin wishing for the return of <center>.)