title: Background image showing through picture with transparent background
body: <p>I'm trying to create a banner for a website.  For SEO purposes, I decided to see if I could create the banner in type rather than as an imported image.  I'm making good progress, but for some reason my background image is showing through a logo overlaid on top of it.</p>
  
  <p>I have the background image (set in css) set with opacity because I don't want it full strength.  Over it I place the logo which has a transparent background, but no opacity.</p>
  
  <p>The goal banner is at:</p>
  
  <p><a href="http://arielbalter.com/cio/" rel="nofollow">http://arielbalter.com/cio/</a></p>
  
  <p>The code I'm trying is at:</p>
  
  <p><a href="http://jsfiddle.net/abalter/QzNpQ/" rel="nofollow">http://jsfiddle.net/abalter/QzNpQ/</a></p>
  
  <p><em><strong></em>**<em>*</em></strong>   HTML   <strong><em>*</em>****</strong></p>
  
  <pre><code>&lt;header&gt;
      &lt;div id="outer"&gt;
          &lt;div id="background-image"&gt;&lt;/div&gt;
          &lt;div id="logo"&gt;
              &lt;img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png" /&gt;
      &lt;/div&gt;
          &lt;div id="lines"&gt;
              &lt;h1 id="line1"&gt;check it out!&lt;/h1&gt;
              &lt;h1 id="line2"&gt;Home Inspection&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><em><strong></em>**</strong>  CSS  <strong><em>*</em>***</strong></p>
  
  <pre><code>header {
      border: 3px double black;
      width: 100%;
      height: 7em;
  }
  #outer {
      background-size: 100% 100%;
      height: 100%;
      position: relative;
  }
  #background-image {
      background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      opacity: 0.3;
  }
  #logo {
      float: left;
      border: 1px dashed green;
      height: 100%;
  }
  #logo img {
      height: 100%;
  }
  #lines {
      display: inline-block;
      border: 2px dotted blue;
      top: 0;
      bottom: 0;
  }
  #line1 {
      display: block;
      position: relative;
      font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
      font-weight: bold;
      font-size: 3em;
      color: FireBrick;
      padding: 0.1em 0 0 0;
      margin: 0 0 -0.4em 0;
      border: 2px dashed green;
      letter-spacing: 0.05em;
  }
  #line2 {
      display: block;
      position: relative;
      font-family:"Trebuchet", sans-serif;
      font-size: 2em;
      color: black;
      font-weight: bold;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
      border: 2px dashed orange;
      font-variant: small-caps;
  }
  </code></pre>
  
  <p>Thanks!</p>