title: Display/Load Different Background Image Depending on Device
body: <p>I'd like to use a large background image for desktop users and a different smaller background image for mobile users.</p>
  
  <p>I found this answer</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img-responsive.mobile {
    display: none;
  }
  
  @media only screen and (max-device-width: 480px) {
    .img-responsive {
      display: none;
    }
    .img-responsive.mobile {
      display: block;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
      &lt;img src="image\bannerimages\Career.png" class="img-responsive careerpage"&gt;
      &lt;img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile"&gt;
      &lt;h2 class="careerbannertext"&gt;LIFE AT TEKNOTRAIT&lt;/h2&gt;
      ...       
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://stackoverflow.com/questions/39891785/how-to-display-different-images-in-mobile-and-desktop-devices">how-to-display-different-images-in-mobile-and-desktop-devices</a> </p>
  
  <p><strong>Problem with this solution is it loads two images - I'd like to only load the image necessary. How can this be done?</strong></p>