Generated by SassMeister.com. (http://sassmeister.com/gist/805bd0c9a7458e11897b)

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$small-only: only screen and (max-width: 40em);
$small-up: only screen; // everything
$medium-only: only screen and (min-width: 40.0625em) and (max-width: 64em);
$medium-up: only screen and (min-width: 40.0625em);
$large-only: only screen and (min-width: 64.0625em) and (max-width: 90em);
$large-up: only screen and (min-width: 64.0625em);
$xlarge-only: only screen and (min-width: 90.0625em) and (max-width: 120em);
$xlarge-up: only screen and (min-width: 90.0625em);
$xxlarge-only: only screen and (min-width: 120.0625em) and (max-width: 6249999.9375em);
$xxlarge-up: only screen and (min-width: 120.0625em);

@mixin retina {
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-moz-min-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    @content;
  }
}


// with optimizely, add .opt-test class to hompage hero element -RH
#bv-hp-hero.opt-test {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  #homepage-products-wrapper {
    display: none;
  }

  @media #{$small-only} {
    // you could put cover here depending on how you want it to behave
    // don't put auto (or if you do, you will need to use something else for retina
    // as it is too large for auto to work properly -RH
    background-size: contain;
    background-image: image-url('test/home-hero-2-small.jpg');
    background-position-y: 0;
    @include retina {
      background-image: image-url('test/[email protected]');
    }
    .hp-image-container {
      // this works for 'contain' to get the text below the image
      // based on it's ratio (calculated by size - you can hard-code this) -RH
      $image-height: 476px;
      $image-width: 375px;
      padding-top: ($image-height/$image-width) * 100%;
    }
  }

  @media #{$medium-up} {
    background-image: image-url('test/home-hero-2-medium.jpg');
    @include retina {
      background-image: image-url('test/[email protected]');
    }
  }

  @media #{$xxlarge-up} {
    background-image: image-url('test/home-hero-2-large.jpg');
    @include retina {
      background-image: image-url('test/[email protected]');
    }
  }
}

SassMeister-output.css

#bv-hp-hero.opt-test {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#bv-hp-hero.opt-test #homepage-products-wrapper {
  display: none;
}

@media (max-width: 40em) {
  #bv-hp-hero.opt-test {
    background-size: contain;
    background-image: image-url("test/home-hero-2-small.jpg");
    background-position-y: 0;
  }
}

@media only screen and (max-width: 40em) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 40em) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 40em) and (-moz-min-device-pixel-ratio: 2), only screen and (max-width: 40em) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-width: 40em) and (min-device-pixel-ratio: 2), only screen and (max-width: 40em) and (min-resolution: 192dpi), only screen and (max-width: 40em) and (min-resolution: 2dppx) {
  #bv-hp-hero.opt-test {
    background-image: image-url("test/[email protected]");
  }
}

@media (max-width: 40em) {
  #bv-hp-hero.opt-test .hp-image-container {
    padding-top: 126.93333%;
  }
}

@media (min-width: 40.0625em) {
  #bv-hp-hero.opt-test {
    background-image: image-url("test/home-hero-2-medium.jpg");
  }
}

@media only screen and (min-width: 40.0625em) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 40.0625em) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 40.0625em) and (-moz-min-device-pixel-ratio: 2), only screen and (min-width: 40.0625em) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 40.0625em) and (min-device-pixel-ratio: 2), only screen and (min-width: 40.0625em) and (min-resolution: 192dpi), only screen and (min-width: 40.0625em) and (min-resolution: 2dppx) {
  #bv-hp-hero.opt-test {
    background-image: image-url("test/[email protected]");
  }
}

@media (min-width: 120.0625em) {
  #bv-hp-hero.opt-test {
    background-image: image-url("test/home-hero-2-large.jpg");
  }
}

@media only screen and (min-width: 120.0625em) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 120.0625em) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 120.0625em) and (-moz-min-device-pixel-ratio: 2), only screen and (min-width: 120.0625em) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 120.0625em) and (min-device-pixel-ratio: 2), only screen and (min-width: 120.0625em) and (min-resolution: 192dpi), only screen and (min-width: 120.0625em) and (min-resolution: 2dppx) {
  #bv-hp-hero.opt-test {
    background-image: image-url("test/[email protected]");
  }
}

http://sassmeister.com/gist/805bd0c9a7458e11897b