[Responsive background] #responsive CSS background image via media queries

snippet.scss

// 
// Responsive background image via media queries. More info here: 
// developers.google.com/web/fundamentals/design-and-ux/responsive/images
// 

.block {
  // Mobile standard image.
  background-image: url("../images/mobile.png");
  background-repeat: no-repeat;
  background-size: contain;

  // Mobile high resolution image.
  @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
    background-image: url("../images/mobile@2x.png");
  }

  // Desktop standard image.
  @media (min-width: $large-screen) {
    background-image: url("../images/desktop.png");
  }

  // Desktop high resolution image.
  @media (min-width: $large-screen) and (min-resolution: 2dppx), 
         (min-width: $large-screen) and (-webkit-min-device-pixel-ratio: 2) {
    background-image: url("../images/desktop@2x.png");
  }
}