Skip to content

Instantly share code, notes, and snippets.

@AlexWebLab
Last active September 12, 2023 17:05
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save AlexWebLab/9a9ec4b1ce74c8566fc696967af76baf to your computer and use it in GitHub Desktop.
Save AlexWebLab/9a9ec4b1ce74c8566fc696967af76baf to your computer and use it in GitHub Desktop.
Retina displays CSS background image
.logo_background {
background-image: url('../img/logo@1x.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 80px 40px; /* size of the logo image @ 1x */
}
@media /* only for retina displays */
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.logo_background {
background-image: url('../img/logo@2x.png');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment