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 create a smooth zoom and display an overlay when another HTML element gets hovered?

    jQuery how to add another css in code?

    How to load up CSS files using Javascript?

    CSS how to align elements

    How to make an inline-block box stick to the top? [duplicate]

    how to replace entire css text with another?

    Mysterious color showing up on tab hover

    CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

    CSS: How to shadow a field like this? [closed]

    How to darken a CSS background image?

    How to select siblings between 2 tags of same class using CSS

    CSS Bootstrap AngularJS - How to reduce table row height?

    Unsure how to use border-bottom in CSS

    How can I add a gradient overlay to an image that is set in a style attribute in css?

    How to style author id in WordPress?

    hide show div using nav html5 query javascript

    How can add atribute to css of page on page load event

    How to get two CSS rating star widgets to not affect each other when clicked

    How do I apply the browser height to a CSS class?

    ASP.NET - IIS 7 - DotNetNuke - How do I force browsers to reload the site's CSS?

    How should I keep webpages consistent [closed]

    How do i apply fadein and fadeout effect for this?

    How to write css for fixed header and scrollable table

    how to define css to get the simple tabbed menu

    How to get actual (not original) height of a CSS-rotated element

    How to reduce shiny interactive rmarkdown margins?

    How to create offer tag with css and pass value to it

    How to create a image transition hover effect with css without breaking the grid layout

    How to remove odd bottom padding from gradient inside a button on firefox?

    CSS - How to make rectangle with pointed sides? [duplicate]