title: CSS puzzle: How to add background-image and set height/width on empty span?
body: <p>I've set <code>background-image</code> on a couple of <code>span</code> elements, but they aren't showing up, I think because my <code>height</code> and <code>width</code> settings are being ignored. </p>
  
  <p>HTML source:</p>
  
  <pre><code>&lt;div class="textwidget"&gt;
  &lt;a href="#" title="Start here"&gt;&lt;span id="starthere" class="sidebar-poster"&gt;&lt;/span&gt;&lt;/a&gt; 
  &lt;a href="#" title="Primary documents"&gt;&lt;span id="#primarydocs" class="sidebar-poster"&gt;&lt;/span&gt;&lt;/a&gt; 
  &lt;a href="#" title="Donate"&gt;&lt;span id="donate" class="sidebar-poster"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>span.sidebar-poster {
      margin-bottom: 10px;
      background-repeat: no-repeat;
      width: 160px;
  }
  span#starthere { 
      background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
      height: 285px;
  } 
  span#starthere:hover { 
      background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
  } 
  span#primarydocs { 
      background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
      height: 285px;
  } 
  span#primarydocs:hover { 
      background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
  } 
  span#donate { 
      background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
      height: 285px;
  } 
  span#donate:hover { 
      background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
  } 
  </code></pre>
  
  <p>None of the background images are actually visible.</p>
  
  <p>In Chrome Developer Tools, Under Computed Style, these two spans do appear to have a background image. If I copy and paste the URL of this image, I see the image. Yet nothing is actually rendering.</p>
  
  <p><strong>[UPDATE - this part is solved, thanks]</strong> In Chrome Developer Tools, under Matched Rules, only the <code>#starthere</code> and <code>#donate</code> spans are actually picking up the <code>background-image</code> attribute. The <code>#primarydocs</code> span is not. Why not?</p>