How to position a background image in reveal.js?


Tags: css,background-image,reveal.js

Problem :

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

    CSS Howto..

    How to apply IE Fixes for LESS CSS [closed]

    How to switch between specific CSS files using jQuery?

    How to set negative z-index with jQuery?

    How can I increase the size of twitter bootstrap carousel navigation arrows

    Bootstrap with custom css how to align text vertically?

    How can I set a border in alignment with other borders

    Django + Mac osx how to use less css?

    How to change angularJS's default css styles? Search box etc

    How to Use IF Statement in Play Framework to Use CSS for Only 1 Page

    How to alternate background colour on DIV rows? (Jquery and/or CSS)

    Change Class or CSS “display” property of a DIV and show it smoothly

    How to edit mobile CSS in SocialEngine?

    How to CSS select all cells with colspan set?

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How to make a GWT-like CaptionPanel manually

    How to display the :after content outside element

    how to change style of a css element using jQuery

    How can I use javascript, html and css to make an image a button, which can do the following?

    How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

    How to create an image that changes state?

    How to get a working CSS zigzag border?

    How can I align centered inline-block elements correctly?

    jquery: how to change properties of whole css-class? [duplicate]

    How to fix background Opacity css

    (some) background images won't show up in IE7 or IE8

    How to move an element styled by CSS stylesheet?

    How to stretch items in menu (from right to left) - HTML and CSS

    How to make a box expand a distance from the sides

    How to get elements by class and provide css effects?

    How can clients without Ruby view web pages using SASS?