A common and IMO cool way to create impress.js presentations, is to use some large background image for the entire presentation, then layout each slide over it. One of my first impress.js presentation was Selling Open Source 101 for Oscon 101. The presentation is inside a picture of a woman selling all kinds of stuff in a bazaar.

Next week I will present something about EC2 at HighLoad++ conference, and my presentation is flying over some clouds, of course.

A challenge with this approach has been, that when the background image is scaled aggressively, it quickly becomes rather blurry. Issues impress#609 and henrikingo#14 discuss this problem. Github user @fin-ger on the first issue helped me understand what the issue is, and for my HighLoad++ presentation I finally figured out how to avoid it and get a sharp background image.

Today I've created a demo which shows both the blurry and sharp way to use a background image:

Open presentation in new window

The solution isn't necessarily generally useful. While it's great to have a sharp background image, it turns out that the browser rendering a 7000 x 10000 pixel image will quickly run out of memory. On individual slides you're fine, because the browser will only render the visible part, but if you actually want to show the entire image - such as on a first or last slide, then rendering the image will fail. And I have 16 GB of RAM on this laptop!

So in practice you may want to combine a bit of both solutions. Maybe use data-scale="2" or 3, and then draw a large background on that. This will yield a good compromise between sharp detail and still actually being able to handle the entire background image.