title: What's causing this background-image to display "incorrectly" in Opera and Firefox?
body: <p>I know this is something I'm probably doing wrong, so please don't incinerate me for the thread title.</p>
  
  <p>I'm trying to put together a small personal website using HTML 5/CSS3.  I've checked with the w3c validator and the site and CSS file fully conform according to the validator (However the validator has a warning attached that it might not be perfect).</p>
  
  <p>I'm not sure how to explain it without a picture, so here's a comparison of Chrome/Opera/Firefox:
  <img src="https://img.photobucket.com/albums/v714/darkflight_devil/ImDoingItWrong.png" /></p>
  
  <p>So, you can sorta see how in Chrome the background image is in one non-repeating piece, whereas in Opera/Firefox the image has, oddly, been broken up and placed slightly differently.</p>
  
  <p>I'm confident this is due to an error on my part, but I've had no luck at all figuring out why the image is being mangled in Opera and Firefox.</p>
  
  <p>Here's the CSS that's relevant to this issue:</p>
  
  <pre><code>/* Content Pane */         
  .content
  {           position: absolute;
              left: 220px;
              width: 800px;
              top: 80px;
              min-height: 550px;
              background-color: rgba(8,12,42,0.85);
  }
  
  /* Headers */
  .content hgroup 
  {
              background: url("Header_Flat.png") no-repeat left top;
              min-height: 38px;
              padding-left: 28px;
              text-shadow: 0 0 8px #FFA9FF;
              color: Black;   
              text-decoration: none;  
  }
  
  .content hgroup h1 
  {
              display: block;
  }
  
  .content hgroup h3
  {
              display: inline;
              position: relative;
              top: -12px;
              left: 20px;
              text-shadow: 0 0 6px #AFF9FF;
  }
  
  .content hgroup h4
  {
              display: inline;
              position: relative;
              top: -12px;
              left: 20px;
              font-size: xx-small;    
              text-shadow: 0 0 6px #AFF9FF;
  }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;hgroup&gt; 
      &lt;h1&gt;New Site!&lt;/h1&gt; 
      &lt;h3&gt;Now with Bloom!&lt;/h3&gt; 
      &lt;h4&gt; - Posted Tuesday, May 11th 2010&lt;/h4&gt; 
  &lt;/hgroup&gt;
  </code></pre>
  
  <p>Can anyone see what I'm doing wrong?</p>
  
  <h2>EDIT</h2>
  
  <p>I changed the CSS a bit, and it halfway-fixed the image (I don't understand why) and the bad alignments (I hadn't yet noticed those).</p>
  
  <p><img src="https://img.photobucket.com/albums/v714/darkflight_devil/ImDoingItWrong2.png" /></p>
  
  <p>The changed CSS defs are as follows:</p>
  
  <pre><code>/* Headers */
  .content hgroup 
  {
              background: url("Header_Flat.png") no-repeat left top;
              min-height: 38px;
              position: relative;
              text-shadow: 0 0 8px #FFA9FF;
              color: Black;   
              text-decoration: none;  
  }
  
  .content hgroup h1
  {
              position: relative;
              left: 28px;
  }
  
  .content hgroup h3
  {
              display: inline;
              position: relative;
              top: -12px;
              left: 48px;
              text-shadow: 0 0 6px #AFF9FF;
  }
  
  .content hgroup h4
  {
              display: inline;
              position: relative;
              top: -12px;
              left: 48px;
              font-size: xx-small;    
              text-shadow: 0 0 6px #AFF9FF;
  }
  </code></pre>