Support data-background for full screen backgrounds in reveal.js slides

[jbarratt]

Reveal.js supports setting data-background attributes on the <section> elements; data-background, data-background-size, and data-background-repeat.

<section data-background="#ff0000">
    <h2>All CSS color formats are supported, like rgba() or hsl().</h2>
</section>
<section data-background="http://example.com/image.png">
    <h2>This slide will have a full-size background image.</h2>
</section>
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
    <h2>This background image will be sized to 100px and repeated.</h2>
</section>

One idea I had was to add a generic attribute-management capability via HTML comments, as they are ignored by markdown, directly in the slide, like so:

<!-- data-background="myimage.png" -->

Then the slide renderer could pick anything attribute-shaped and stick it into the section tag.

[damianavila]

This could be an option... half-way, but probably more quick than a full implementation...

[jbarratt]

Ok. Architecturally could this be done as an extension or would it need to be injected more directly into the slide rendering pipeline?

[damianavila]

The slide rendering pipeline is in charge of reveal.js, so probably you have to touch the reveal source... or write a reveal plugin...
The other option, I personally would follow, is essentially work with the reveal preprocessor as a model, be able to detect the HTML comment, and later pass this info to a custom template... and pack all these things inside an extension.