title: css image swap mobile vs desktop using media query
body: <p>First of all thank you to all who have added their input. We are very close to having a solution!!! We duplicated the whole div and just removed the parallax-content for the second div and replaced show-on-desktop with show-on-mobile in the second div.</p>
  
  <p>Unfortunately the mobile version isn't displaying the mobile version.</p>
  
  <p>Here is the style sheet </p>
  
  <pre><code>.show-on-desktop {
    /* display can be inline-block, just choose one that suits your need*/
    display: block;
  
    /* it's your call what the break point is */  
    @media screen and (max-width: 1440px) {
      display: none;
    }
  }
  
  .show-on-mobile {
    /* display can be inline-block, just choose one that suits your need*/
    display: none;
  
    /* it's your call what the break point is */  
    @media screen and (max-width: 411px) {
      display: block;
    }
  }
  </code></pre>
  
  <p>Here is the updated code with the divs displayed</p>
  
  <pre><code>&lt;div class="show-on-desktop bg-img parallax-content" style="background-image: url(img/home-desktop.jpg?crop=entropy&amp;fit=crop&amp;fm=jpg&amp;h=675&amp;ixjsv=2.1.0&amp;ixlib=rb-0.3.5&amp;q=80&amp;w=1375); background-position: 0px 199.4px;" data-stellar-background-ratio="0.5"&gt;&lt;/div&gt;
  
  &lt;div class="show-on-mobile bg-img" style="background-image: url('img/home-mobile.jpg?crop=entropy&amp;fit=crop&amp;fm=jpg&amp;h=675&amp;ixjsv=2.1.0&amp;ixlib=rb-0.3.5&amp;q=80&amp;w=1375');"&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>here is the original post</p>
  
  <p>I have a client who is running a bootstrap framework theme that has parallax sections on the page.  These sections look fantastic on a laptop or tablet, however on mobile phones, it just grabs the top left corner of a large image.</p>
  
  <p>I suggested to the client that we write a PHP detection script on the server that identifies the device as either Mobile or not and then swap the image in PHP, so that the image looks optimal on a phone.</p>
  
  <p>However it got me thinking that there's got to be a way to do it in CSS. I'm not that familiar with mobile CSS and so I thought this might be an interesting post for our community.</p>
  
  <p>Here's the one line of code that displays the image.</p>
  
  <pre><code>&lt;div class="bg-img full-height  parallax-content" style="background-image: url('img/image-name.jpg?crop=entropy&amp;fit=crop&amp;fm=jpg&amp;h=675&amp;ixjsv=2.1.0&amp;ixlib=rb-0.3.5&amp;q=80&amp;w=1375');" data-stellar-background-ratio="0.5"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>what I'm looking for is that IF its mobile instead of showing image-name.jpg it will show instead image-mobile.jpg (a different file ) that is sized correctly for mobile.</p>
  
  <p>again, this could be done in PHP but there should be a way to do this in either CS or JS.  Any ideas?  Thanks in advance.</p>