title: Can't get background image to hover over image
body: <p>I am trying to hover a transparent PNG with a caption over the photo. When I give the divs position: absolute or a specified width the hover dissapears. However if I do not, then the hover displays to the right and the left of the image. </p>
  
  <p>I am clearly doing something wrong but just can't figure out what. Any help would be appreciated. </p>
  
  <p>Thanks!</p>
  
  <p>Here is the site and relevant code. </p>
  
  <p>Website: <a href="http://www.theshalomimaginative.com/" rel="nofollow">http://www.theshalomimaginative.com/</a></p>
  
  <pre><code>&lt;div id= "logo"&gt;
   &lt;h3&gt;&lt;img src="Graphics/splashpagelogo.png"  alt="The Shalom Imaginative Documentary Photography" /&gt;&lt;/h3&gt;
  &lt;/div&gt;
  
  
  #logo {
  position:absolute; width:475px; height:365px; padding: 0 0 0 242px;
  }   
  
  h3 {
  position:absolute; width:475px; height:365px;display: block;
  }
  
  h3:hover {
  position:absolute; width:475px; height:365px; display: block; background-image:   url('http://theshalomimaginative.com/Graphics/Homepagehover.png');
  }
  </code></pre>