impress.js HowTo: Slides over a background image

hingo's picture

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.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Frans's picture

And I have 16 TB of RAM on

And I have 16 TB of RAM on this laptop!

Nice typo. Or put another way, I wish I had that instead of the meager 32 GB on my desktop. :-)

hingo's picture

Hah! Thanks for pointing it

Hah! Thanks for pointing it out. I actually made the same error last week. Maybe it's my freudian dream or something.

Greger's picture


Thank you for this. Good stuff. I will try out Impressionist and see how I get along.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • Allowed HTML tags: <h1> <h2> <h3> <h4> <p> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <sup> <div> <blockquote> <pre> <img>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically. (Better URL filter.)

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
2 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.