[Support request] Loading a Retina res hero image?

Home Forums Support Loading a Retina res hero image?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1413282
    Michael

    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.

    #1413738
    David
    Staff
    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:

    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…

    #1414066
    Michael

    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.

    #1414174
    Tom
    Lead Developer
    Lead Developer

    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 🙂

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