Are Background Images Retina Compatible / Pro

[amyharris]

Hello!

Are background images in cells retina ready in the current version of Pro? I searched the forum and google and only found a post from 2014 stating:

“Regarding the retina ready devices, the theme calculates retina automatically for the logo while for the other uploaded images, it depends if you’re using a larger image, it will automatically be reduced by the given max width of the content area and thus will look fine on retina devices. Otherwise, for the background images, it might require some custom CSS code using retina specific media query (http://css-tricks.com/snippets/css/retina-display-media-query/).”

I tried adding this to the elements css but I don’t think it did anything:

$el .x-bg-layer-lower-image(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}

Thank you!

[ruenel]

Hello Amy,

Thanks for writing in!

Your custom CSS is incorrect. The correct one should be:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    $el .x-bg-layer-lower-image {
    	background-image: url(placeholder of a very large image);
    }
}

This code will not work out of the box. You should supply the image URL to be displayed in the resolution you have provided in the code above.

Best Regards.

[amyharris]

Thank you very much!!

[ruenel]

You are most welcome.