How to: Apple Help Files > Retina enabled

If your app is Retina enabled you might also want to create good looking help files.
As the help files are normal HTML/CSS files this can be done using CSS and DIV’s by using -webkit-image-set.
Don’t know if it’s the best way, but it’s how I do it and it seems to work.

Add your images to your CSS file like this:

#preferencesCategoriesWindow {
    width: 442px;
    height: 406px;
    background-image: -webkit-image-set(
        url(../images/preferencesCategoriesWindow-lowres.png) 1x,
        url(../images/preferencesCategoriesWindow-hires.png) 2x);
}

Make sure you set the image width/height. It should be the size if the ‘-lowres’ version.
Then just create a DIV where you want your image with the id you set in your CSS:

<div id="preferencesCategoriesWindow"></div>

Works like a charm for me so far :slight_smile: