sass: how to render different images for mobile only

Question

I am not 100% clear on how to implement images for mobile only view that are different than the ones I have for desktop view

So for example, if I have this image for desktop:

&.card {
        .card-image {
          @include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
        }
      }

which comes from the mixin file where I have this code:

@mixin background-helper($image: false, $position: center, $size: contain, $repeat: no-repeat){
  @if $image {
    background-image: asset-url($image);
    background-repeat: $repeat;
    background-size: $size;
    background-position: $position;
  }
}

Not sure what logic to add that would tell my application to render something other than old-pic.jpg if the user is viewing it on a mobile phone.

Answer 1

It seems you have to use media queries. for example:

$break-small: 320px;
$break-large: 1200px;

.card-image {
  @media screen and (max-width: $break-small) {
    @include background-helper('gallery/mobile-pic.jpg', center, contain, no-repeat);
  }
  @media screen and (min-width: $break-large) {
    @include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
  }
}