Q: Possible to have different background images on different slides using CSS?

[rillbert]

Hi, Is it possible to use a combination of CSS styles and asciidoctor roles to define a separate background image, that fills the entire display for specific slides?

In my slide deck, I have the following background images defined via CSS rules:

1. A specific background for the title page, defined as:

   body .title {
   background: url("../mytitleimage.svg") no-repeat center center fixed;;
   background-size: cover;
   }

2. Another background image that all other slides use, defined as:

   /* Set the background image for all normal slides */
   body {
   background: url("../myslidebackground.svg") no-repeat center center fixed;
   background-size: contain;
   }

   I would like to be able to define other background images for slides that include a specific role or attribute. An example use case would be a 'heading slide' for a sub-section of the presentation.

I believe that I've tried the different ways mentioned in the documentation, e.g.

[.red.background]
== Slide One

Is very red

Combined with a css style. This does only seem to apply the css rule to the background of the paragraph within the slide. I've also tried the 'data-state' approach but again, I can not achieve my goal of having a background image cover the entire display.

Reading the revealjs docs, it appears that it would be possible to do this by adding a 'data-background-image' attribute to the section element for the slide but so far, I've been unsuccessful to do that using CSS/asciidoctor roles. It does work however, if I include the image explicitly in a slide using the 'image::' macro but again, I am looking for a CSS based solution to decouple the layout from the content of the presentation.

Any help is appreciated.

[ggrossetie]

Hi!

reveal.js is using data attributes to set background that covers the full slide:

• https://docs.asciidoctor.org/reveal.js-converter/latest/converter/syntax/background/#background-images
• https://revealjs.com/backgrounds/

Is it possible to use a combination of CSS styles and asciidoctor roles to define a separate background image, that fills the entire display for specific slides?

Not sure... you should try to declare a background image using the image:: macro approach and inspect the HTML to see what reveal.js is doing.