title: Creating a responsive background image with PHP and Javascript
body: <p>I am building a website where I have a div with a background image.  At the moment, I have 3 sizes of background images per image, one for fullscreen, one for smaller screens, and one for mobile.  I know I can use @media screen for css backgrounds and scaling, <strong>but this would require that I create a new CSS rule for every image.</strong></p>
  
  <p>To resolve my problem, I thought I could use PHP, but it dawned on me that since PHP is serverside, the page would not be responsive and only select the correct image on the pageload.  My current PHP code was roughly this:<br>
  <strong>EDIT</strong>: this code is useless since I overlooked the fact that window.screen.width is javascript and not PHP</p>
  
  <pre><code>&lt;div style="background-image: url(    
  &lt;?php 
  var screenWidth = window.screen.width;
  
  if (screenWidth &gt;= 1280)
  {
      echo $imageregular
  }
  elseif (screenWidth &gt;= 630 &amp;&amp; screenWidth &lt; 1280)
  {
      echo $imagesmall
  }
  else 
  {
      echo $imagemobile
  }
  ;?&gt;
  );"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(please excuse any errors in my PHP, I'm still learning and I haven't tested this) using a php include, I would then include this PHP file in my parent HTML whenever I wanted an image like this, e.g. </p>
  
  <pre><code>&lt;?php
  $imageregular = '1.jpg';
  $imagesmall = '2.jpg';
  $imagemobile = '3.jpg';
  include 'menuitem.php';
  ?&gt;
  </code></pre>
  
  <p>So, how can I go about redoing this so that I use Javascript to detect the screenwidth and set the image, all the while keeping the flexibility of using PHP variables?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Alright, since PHP can't discover browser widths, I assume I can use something like this:</p>
  
  <pre><code>$( window ).resize(function() {
    if ( $(window).width &gt; 1280)
     {
        //somehow get a php variable and include it in here and do a .css('background-image','url(&lt;?php echo $imageregular ?&gt;');
     }
  });
  </code></pre>
  
  <p>etc.</p>
  
  <p>How can I use PHP variables in Javascript/Jquery?</p>