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?

https://revealjs.com/backgrounds/ details that `data-background-position` is an option. For example, `data-background-position: top` — cmhughes, Jan 18 '21 at 10:35

Jens Schauder · Accepted Answer · 2016-05-11T11:49:50.987

19

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

edited May 11 '16 at 11:49

answered Aug 24 '14 at 12:21

Jens Schauder

77,657
34
181
348

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. – Jens Schauder May 11 '16 at 11:50
How would you do it from MarkDown? – Royi Feb 19 '21 at 13:32

score 1 · Answer 2 · answered May 07 '20 at 14:17

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

How to position a background image in reveal.js?

2 Answers2

Linked