flatbubba
12/12/2017 - 7:28 AM

CSS Retina Background Images

header {
  background: url(image.jpg);
}
@media (min-resolution: 192dpi){
  header {
    /*using the larger image for retina screens*/
    background: url(image@2x.jpg);
  }
}

For Safari:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  header {
    background: url(image@2x.jpg);
  }
}

/*
In every HTML element everything EXCEPT THE MARGIN is considered the background layer and is transparent by default.
*/