title: Switch images dynamically (with PHP) but also with CSS media queries?
body: <p>I have an image that replaces an  tag</p>
  
  <pre><code>&lt;h1 id=myImage&gt;Text&lt;/h1&gt;
  </code></pre>
  
  <p>The css looks something like:</p>
  
  <pre><code>  h1#myImage {
      text-indent: -9999px;
      background: url('myImage.jpg') no-repeat;
      width: 400px;
      height: 80px;
      }
  
      @media-only screen and (max-width: 767px) {
      h1#myImage {
      text-indent: -9999px;
      background: url('myImage-mobile.jpg') no-repeat;
      width: 400px;
      height: 80px;
      }
   }
  </code></pre>
  
  <p>This works the way I want it to (i.e. when I resize the browser, I see the mobile version of the image)...however now I need h1#myImage to change dynamically with a user's preference...so that "myImage.jpg" and "myImage-mobile.jpg" get swapped out with "myNewImage.jpg" and "myNewImage-mobile.jpg" </p>
  
  <p>I'm also using LESS.js so maybe if there's some way to combine my CSS variables with php variables..</p>