ADE and Background Images

Update: (13/06/2015): This appears to be fixed in ADE 4 - if you’re still seeing this issue - try updating ADE.

I’ve been involved with creating guidebooks for distribution to ereader devices which run Adobe Digital Editions or ADE for quite some time. ADE is the rendering engine that powers the generic ereaders like the Barnes and Noble Nook or the Sony Reader. As a general rule of thumb if you’re not using an iPad or a Kindle - then chances are good you’re using ADE.

Building for ADE is a bit of a pain, it has less CSS support than iBooks or KF8, and as far as I know there aren’t any development kits which can alert you that stylesheets are implementing rules which aren’t supported by the device. Basically we’ve been discovering what ADE can and can’t do by good old fashioned trial and error.

For quite some time at Lonely Planet we’ve had a post processing script which would replace our use of background images (usually implemented for icons - rather important in a guidebook), with inline images before shipping our ADE optimized titles to retailers. It was believed for quite some time that they were not supported by the reader, and was yet another hacky shenanigan that needed to be pulled on the book before it went to market.

However we were wrong, ADE does support background images, what it doesn’t support is relative links to background images. So given you have an epub with the following structure:

|- OEBPS/
|-- styles/
|--- style.css
|-- images/
|--- my-groovy-bg-img.gif
|-- 01-chapter.xhtml

And a style.css which implements the background image like this:

span.icon
{
  background-image: '../images/my-groovy-bg-img.gif'
}

You won’t get any background image whatsoever in ADE, however move the stylesheet out of its folder like:

|- OEBPS/
|-- style.css
|-- images/
|--- my-groovy-bg-img.gif
|-- 01-chapter.xhtml

And update your CSS:

span.icon
{
  background-image: 'images/my-groovy-bg-img.gif'
}

And you’ll have background images!

The way we found this out - dumb luck! Our super adventurous UI dev found it by playing around with the file structure of our files.

This (for lack of a better term) bug is a huge issue if you wish to use an application like Sigil to manipulate epubs. Sigil unfortunately changes the whole ePub file structure and as such will blow up the background images for ADE - you’ve been warned!