Created
September 10, 2015 15:00
-
-
Save robpataki/598950ada5e4512c8cdb to your computer and use it in GitHub Desktop.
Retina background image CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .icon { | |
| background-image: url("social-icons.png") 0 0 no-repeat; | |
| } | |
| /* 1.25 dpr and up - including retina devices */ | |
| @media | |
| (-webkit-min-device-pixel-ratio: 1.25), | |
| (min-resolution: 120dpi){ | |
| .icon { | |
| background-image: url("[email protected]"); | |
| background-size: 256px 256px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Based on http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
It seems like this single style definition works well on true retina MacBook Pro 13, iPhone 5s, iPhone 6 (pixel density: 2), just as well as on a Nokia Lumia 520 (pixel density 1.422...)