title: Getting a background image to display in a blank div element
body: <p>I'm looking to use a blank div element to display a background image but nothing is displaying unless I put something (i.e., some text) in the div element.</p>
  
  <p>I need to do this because I want to display a graphic next to some text but have the graphic  vertically aligned with the text.</p>
  
  <p>How do you get a background image to display in a blank div?  </p>
  
  <p>My Google-fu has failed me.</p>
  
  <pre><code>&lt;div class="photoInfo"&gt;
  lorem ipsum | 
  &lt;div style="background:url('foo.gif') no-repeat;display:inline;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>
  
  <p>edit:
  The code below actually displays the image but I just need to nick it down like 2 or 3 pixels to have it perfectly aligned.</p>
  
  <p>That's what I'm trying to achieve, any ideas?</p>
  
  <pre><code>&lt;div class="photoInfo"&gt;
      Added&lt;span class="spacer"&gt;•&lt;/span&gt;Wed Apr 01, 2009 1:01 pm&lt;span class="spacer"&gt;•&lt;/span&gt;64.10 KB&lt;span class="spacer"&gt;•&lt;/span&gt;659x878 pixels
      &lt;span class="spacer"&gt;•&lt;/span&gt;
      &lt;img src="/_assets/img/icons/new-photo-small.gif" /&gt;
  &lt;/div&gt;
  &lt;!--&lt;div style="height:14px;width:31px;background:url('') no-repeat 0px 5px;display:inline-block;"&gt;&lt;/div&gt;--&gt;
  
  .photoInfo
  {
  font-size:0.6em;
  color:#b0bad9;
  padding-bottom:15px;
  text-align:center;
  }
  </code></pre>