impress.js HowTo: Slides over a background image

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.

Greger (not verified)

Fri, 2017-11-03 13:07

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

Add new comment

The content of this field is kept private and will not be shown publicly. Cookie & Privacy Policy
  • No HTML tags allowed.
  • External and mailto links in content links have an icon.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • Each email address will be obfuscated in a human readable fashion or, if JavaScript is enabled, replaced with a spam resistent clickable link. Email addresses will get the default web form unless specified. If replacement text (a persons name) is required a webform is also required. Separate each part with the "|" pipe symbol. Replace spaces in names with "_".
About the bookAbout this siteAcademicAccordAmazonBeginnersBooksBuildBotBusiness modelsbzrCassandraCloudcloud computingclsCommunitycommunityleadershipsummitConsistencycoodiaryCopyrightCreative CommonscssDatabasesdataminingDatastaxDevOpsDistributed ConsensusDrizzleDrupalEconomyelectronEthicsEurovisionFacebookFrosconFunnyGaleraGISgithubGnomeGovernanceHandlerSocketHigh AvailabilityimpressionistimpressjsInkscapeInternetJavaScriptjsonKDEKubuntuLicensingLinuxMaidanMaker cultureMariaDBmarkdownMEAN stackMepSQLMicrosoftMobileMongoDBMontyProgramMusicMySQLMySQL ClusterNerdsNodeNoSQLodbaOpen ContentOpen SourceOpenSQLCampOracleOSConPAMPPatentsPerconaperformancePersonalPhilosophyPHPPiratesPlanetDrupalPoliticsPostgreSQLPresalespresentationsPress releasesProgrammingRed HatReplicationSeveralninesSillySkySQLSolonStartupsSunSybaseSymbiansysbenchtalksTechnicalTechnologyThe making ofTransactionsTungstenTwitterUbuntuvolcanoWeb2.0WikipediaWork from HomexmlYouTube