How to position a background image in reveal.js?

Question

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?

Valiancy

revealjs.com/backgrounds details that data-background-position is an option. For example, data-background-position: top – Rockingham

Answer 1

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;
}

Valiancy

The article seems to describe a different method by now. If you want to try that and write an answer based on it, I'll consider it. Don't have time myself right now. – Valiancy

How would you do it from MarkDown? – Woodenware

Answer 2

Based on the "new" solution, in the css file you can include something like this, modifying the size and position values will adapt it to the right size and location on the slide.

body {
  background-image: url(image1.png),url(image2.png), url(image3.png), url(image4.png);
  background-size: 15%, 15%, 15%, 15%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 95% 96%, 95% 3%, 3% 3%, 3% 95%;
}

Animalcule