title: Why won't my picture appear?
body: <p>I'm using a combination of jQuery and PHP to make a template for a full-width responsive picture with three sizes.  What I did worked, but I soon understood that I needed to specify specific ID's to each Div in order to have a custom image for each Div.  I suspect something is wrong with my PHP, since it worked correctly before I echoed ID's.  <a href="http://alexanderlozada.com/citycafe/" rel="nofollow">Here is an example of how it SHOULD work</a> (check the header picture.)</p>
  
  <pre><code>HTML:
  &lt;!-- template 1 --&gt;
  &lt;?php 
  $imageregular = 'http://placekitten.com/1920/500'; //1920 x 500
  $imagesmall   = 'http://placekitten.com/1280/350'; //1280 x 350
  $imagemobile  = 'http://placekitten.com/630/250'; // 630 x 250
  $id = 'aboutpic00';
  include '../fullimage.php';
  ?&gt;
  
  &lt;!-- template again with different ID --?
  
  &lt;?php 
  $imageregular = 'http://placekitten.com/1920/500'; //1920 x 500
  $imagesmall   = 'http://placekitten.com/1280/350'; //1280 x 350
  $imagemobile  = 'http://placekitten.com/630/250'; // 630 x 250
  $id = 'aboutpic01';
  include '../fullimage.php';
  ?&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bg
   {
       height: 350px;
      background-color:#cccccc;
      display:block;
      background-position:center;
      /* and so on for all the media widths.  The CSS probably isn't important, it just establishes the background color and background position. */
   }
  </code></pre>
  
  <p>PHP template (fullimage.php referenced in HTML)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
  //jQuery determines the width of my browser window and executes the following conditions
  
      var width = $(window).width();
          if(width&lt;=630){
               $("#&lt;?php echo $id;?&gt;").css("background-image", "url(&lt;?php echo $imagemobile;?&gt;)");
  
  //if the width is a certain amount, jQuery will change the CSS on my specified #ID Div using the php echo $id
  
          }else if(width&gt;=630 &amp;&amp; width&lt;1280){
               $("#&lt;?php echo $id;?&gt;").css("background-image", "url(&lt;?php echo $imagesmall;?&gt;)");
          }else if(width&gt;1280){
               $("#&lt;?php echo $id;?&gt;").css("background-image", "url(&lt;?php echo $imageregular;?&gt;)");
          }
  
  //The following function is a repeat of the former, but while the window is resizing. I bet I can combine the two but this fix was easier at the time. 
  
      $(window).resize(function() {
          var width = $(window).width();
          if(width&lt;=630){
               $("#&lt;?php echo $id;?&gt;").css("background-image", "url(&lt;?php echo $imagemobile;?&gt;)");
          }else if(width&gt;=630 &amp;&amp; width&lt;1280){
               $("#&lt;?php echo $id;?&gt;").css("background-image", "url(&lt;?php echo $imagesmall;?&gt;)");
          }else if(width&gt;1280){
               $("#&lt;?php echo $id;?&gt;").css("background-image", "url(&lt;?php echo $imageregular;?&gt;)");
          }
      }); 
  });
  &lt;/script&gt;
  
  
  
  &lt;div id="#&lt;?php echo $id;?&gt;" class="bg"&gt;&lt;/div&gt;  //This is the final HTML output of the PHP include that echoes out the div with the custom ID and "bg" class I specified in the CSS
  </code></pre>
  
  <p>Right now, I should be getting adorable kittens, but I'm just getting my grey background color.  Where am I going wrong?</p>
  
  <p>EDIT:  My mistake was that in <code>&lt;div id="#&lt;?php echo $id;?&gt;"</code> class="bg"> I included the "#" which is not supposed to be included in IDs.  I'll delete this thread shortly.</p>