CODEWITHSUNDEEP
cssbackground-imagereveal.js
Jens Schauder
Jens Schauder

Reputation: 81907

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?

Upvotes: 18

Views: 14412

Answers (2)

Rod Burns
Rod Burns

Reputation: 2244

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

Upvotes: 1

Jens Schauder
Jens Schauder

Reputation: 81907

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

Upvotes: 20

Related Questions