[Support request] Loading a Retina res hero image?

Home Forums Support Loading a Retina res hero image?

  • This topic has 3 replies, 3 voices, and was last updated 5 months ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1413282

    Besides the usual hero image on a page, is there a way to also load a Retina version of it that will automatically appear on Retina screens? Thanks.

    Customer Support

    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:


    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.

    Lead Developer
    Lead Developer

    Hi Michael,

    You could do something like this:

    (-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 πŸ™‚

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.