- This topic has 3 replies, 3 voices, and was last updated 5 years, 7 months ago by
.
-
Posts
-
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 thebackground-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.
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 🙂
- You must be logged in to reply to this topic.
