Search code examples
cssbackground-imagereveal.js

How to position a background image in reveal.js?

I want to have a background image on the right hand side of one slide in a reveal.js presentation.

I added the image to the slide like this:

 <section data-background="myImage.jpg">
  // content
 </section>

How can I add css styles to make it appear on the right edge of the screen?

Solution

  • This article helped to find the solution. You can add a style to the html element for the current section using 

    data-state="something"

    and of course you can use that style for tweaking your css. So I used this html:

    <section data-background="myImage.jpg" data-state="img-right">
    // content
</section>

    and the following css:

    html.img-right div.slide-background.present {
    background-position: right;
}