Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Background image demo

What?

A common way to create impress.js presentations: Put a large image in the background, then position slides on top of it.

Background image could be a map, or just some picture related to the topic.

It looks like the presentation is flying or traveling above the background image.

I've used this technique a lot: Oscon presentation, HighLoad "cloud" presentation

How?

2 ways to do it:

<div class="step skip" data-scale="15">

For added effect, also set:

data-z="-500"

So?

2. Large width & height, no scaling

<div class="step skip" data-scale="1">
    <img src="molumen-world-map.svg"
         style="z-index: -1; width: 9000px;" />

So is it better?