slidify set background with reveal.js framework

Question

I love the combination of Slidify with the reveal.js framework.

That said, I can't figure out how to change the background to an image or color using slidify.

For reveal.js, I'd just do:

<section data-background="#007777">

as documented here

I modified the reveal.js slide layout to include the data-background argument as such:

<section class='{{slide.class}}' data-state='{{slide.ds}}' id='{{slide.id}}' data-background='{{slide.background}}'>

and call a new slide like this:

--- .background "#007777"

But no change in the background. Any ideas what I'm doing wrong here?

Answer 1

Specify it as --- {background: "#007777"}.

The dot/hash syntax I use is a shortcut for commonly specified slide properties. So --- .myclass #myid would actually expand to --- {class: myclass, myid: id}. The long-form syntax is more flexible as you can specify any valid YAML after the --- including lists.