--- title: "CSS only technique for high-res background images for retina display. · Appnovation" url: "https://www.appnovation.com/insights/css-only-technique-high-res-background-images-retina-display" description: "A simple CSS-only technique using min-device-pixel-ratio media queries to serve high-resolution background images to Retina displays." --- Article # CSS only technique for high-res background images for retina display. [![](https://cdn.sanity.io/images/ey850001/production/47a0c58773e96fdbf1db47e08ee5f9d00965c1da-68x68.png?w=68&auto=format) Erico Nascimento Design Director](/people/erico-nascimento.md) Jul 26, 2012 2 min read ![Appnovation Blog Default Header](https://cdn.sanity.io/images/ey850001/production/9efe1c26d9584ecfb3dfef5a63e698bf4567d305-1440x600.jpg?w=1400&auto=format) With the release of the new Retina Display MacBooks front-end developers have yet another reason to optimize their designs for high pixel density displays. Here is a simple technique that makes use of the media query "min-device-pixel-ratio" to replace the default background image with the hi-res one. We'll start with a simple div and an icon. #icon{ width:50px; height:50px; background: url('../images/icon.png') centre no-repeat; } And write the media query to replace the image. @media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { #icon{ background-image: url('../images/icon-retina.png'); -webkit-backgorund-size:50px 50px; } } Yes, it's pretty simple! There are only two things you have to watch out for: 1- You need the background size property to be set and note that on the example I'm using only -webkit, ideally you'll have the CSS3 property declared as well. 2 - Some devices use a pixel density of 1.5 so you either want to have a set of images for them as well or change the media query to 1.5 Now if you're worried about the impact on performance because you're essentially loading images twice. There is a very good article on the subject here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ The good news is that newer browsers won't actually load the image twice when they encounter this technique. Bad news is that older browsers will, so if your target audience is using that configuration you might consider a javascript technique instead. Cheers! Érico Vinicius Designing for Mobile Thinking about an app or mobile website? Don't miss this!  [![](https://cdn.sanity.io/images/ey850001/production/47a0c58773e96fdbf1db47e08ee5f9d00965c1da-68x68.png?w=68&auto=format) Erico Nascimento Design Director · Appnovation](/people/erico-nascimento.md) ## Keep reading [![What is Sovereign AI](https://cdn.sanity.io/images/ey850001/production/a5889abdd5e80376912546622e046e3fbef234b4-2496x1664.png?w=640&auto=format)](/insights/what-is-open-source-sovereign-ai.md) Article · 7 min AI ### [What Is Open Source, Sovereign AI?](/insights/what-is-open-source-sovereign-ai.md) Every company is encouraging more AI, and almost every AI bill is climbing. Sovereign AI is about two kinds of control: over your data and over your costs. Here's why open source sits at its foundation. [Iain MacNeil](/people/iain-macneil.md) Article [![AI-first experience design](https://cdn.sanity.io/images/ey850001/production/8bbc2418e87924ef10f36115478a2e10d5bed95e-1584x624.jpg?w=640&auto=format)](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Article · 6 min AI Sep 10, 2026 ### [How to Build an AI-First Experience Without Throwing Out Everything You've Already Built](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Users now expect a direct answer, not a list of links to click through. Here's how organizations can layer an AI-First experience onto their existing website or app, in weeks rather than years. [Andrew Douglas](/people/andrew-douglas.md) Article [![What Becomes Possible When AI Can Read All the Data](https://cdn.sanity.io/images/ey850001/production/c28ab0bd26753421ee42937e13adc7a7f19b47f0-1296x510.jpg?w=640&auto=format)](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Article · 4 min AI Sep 09, 2026 ### [What Becomes Possible When AI Can Read All the Data](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Most of the world's data has never been analyzed, only sampled. AI changes that. How AI-ready data platforms unlock questions no one could ask before. [Appnovation](/people/appnovation.md) Article ## Get the thinking, *before everyone else.* One considered email a month. New essays, field notes from live engagements, and the occasional strong opinion. No noise.