JSFiddle - React, Tailwind, and code Playground

by Kamran Ayub

HTML

<h1>Retina Test</h1>

<p>32x32</p>
<div class="image"></div>

CSS

.image {
  background-image: url(http://icons.iconarchive.com/icons/emey87/social-button/32/facebook-icon.png);
  background-size: 32px 32px;
  width: 32px;
  height: 32px;
}

/* @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx) {
  .image {
    background-image: url("http://icons.iconarchive.com/icons/emey87/social-button/128/twitter-icon.png");
  }
} */

 @media (min-resolution: 100dpi) {
  .image {
    background-image: url("http://icons.iconarchive.com/icons/emey87/social-button/128/twitter-icon.png");
  }
}