Loading a Retina res hero image?

Hi there,

the header element places the image as a CSS background-image.
So you would have to write a CSS media query to swap the background-image: url('my-retina-image-url');

This article provides the retina resolution media queries:

https://css-tricks.com/snippets/css/retina-display-media-query/

But you would have to write a separate query for each and every post/page where that header element is displayed...

Thanks, David. What you wrote and the info in the link was largely undecipherable to me as a newbie. :( I don't have a clue what or where to put in the CSS for say my home page -- just the lines from the first section of the article you linked to? Or the line you wrote above somewhere? ??? Oh well. I thought there might be an easy way to do it. Thanks.

Hi Michael,

You could do something like this:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .home .page-hero {
        background-image: url(URL TO YOUR RETINA IMAGE HERE);
    }
}

Let me know if that helps or not :)