title: Overlaying a Div with a Background Image over a div with a Photo in it
body: <p>I am trying to overlay a div that has a background image in it over a div that contains a photo using an image tag. The div with the background image is needed because a # will appear in that div over the bg image and both of those will appear on top of the photo. </p>
  
  <p>In simple terms: I am trying to put a div on top of another div. Sorry I am unable to absolute path the images yet but I figure a concept will work regardless.  </p>
  
  <p>Code I have is:</p>
  
  <pre><code>&lt;div id="contestLeaders"&gt;
      &lt;div class="leader"&gt;&lt;img src="css/images/chili-photo.jpg" width="138" height="138" /&gt;&lt;/div&gt;
      &lt;div class="leader"&gt;&lt;img src="css/images/chili-photo2.jpg" width="138" height="138" /&gt;&lt;/div&gt;
      &lt;div class="leader"&gt;&lt;img src="css/images/chili-photo3.jpg" width="138" height="138" /&gt;&lt;/div&gt;
      &lt;div class="leader"&gt;&lt;img src="css/images/chili-photo4.jpg" width="138" height="138" /&gt;&lt;/div&gt;
      &lt;div class="leader"&gt;&lt;img src="css/images/chili-photo5.jpg" width="138" height="138" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="leaderRating"&gt;5.0&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#contestLeaders {overflow:hidden;}
  #contestLeaders .leader {float:left; margin-right:4px;}
  .leaderRating {background:url(images/leader-rating-bg.png) no-repeat; width:138px; height:37px; color:#fff;font-size:18px;padding:10px 0px 0px 35px;}
  </code></pre>