title: How to fix jQuery media query that works with console.log() but not proper code
body: <p>I am trying to change the background image of an element based on screen width and the reason I can't use CSS is because the image path is pulled in to the template using PHP.</p>
  
  <p>I have tried several different methods of jQuery media query and the method I am using now does work because I added different messages inside console.log() and these displayed correctly.</p>
  
  <p>When I replace the <code>console.log()</code> with the code for changing the image, it doesn't work.</p>
  
  <pre class="lang-js prettyprint-override"><code>var image;
  jQuery(window).resize(function() {
    if (jQuery(window).width() &lt;= 800) {
      var image = '&lt;?php the_field("mobile_header_background"); ?&gt;';
      var css = 'url(' + image + ') no-repeat center;';
      jQuery('.homehead').css("background", css);
    } else {
      var image = '&lt;?php the_field("header_background"); ?&gt;';
      var css = 'url(' + image + ') no-repeat center;';
      jQuery('.homehead').css("background", css);
    }
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="homehead" style="background: url() no-repeat center; background-size: cover;"&gt;
  </code></pre>
  
  <p>I expect the background value of the homehead div to update accordingly but it's just not working.</p>
  
  <p>Edit:</p>
  
  <p>I have just tried simplifying the code a bit removing the need for variables and outputting the image path straight in to the .css function but this also didn't work despite outputting the image path correctly.</p>
  
  <pre class="lang-js prettyprint-override"><code>jQuery(window).resize(function() {
    if (jQuery(window).width() &lt;= 800) {
      jQuery(".homehead").css("background-image","url(&lt;?php the_field('mobile_header_background'); ?&gt;)");
    } else {
      jQuery(".homehead").css("background-image","url(&lt;?php the_field('header_background'); ?&gt;)");
    }
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="homehead" style="background-image: url(); background-repeat: no-repeat; background-position: center; background-size: cover;"&gt;
  </code></pre>