title: Positioning Layers and text gradients with css
body: <p>I'm a CSS newbie trying to get some text gradients going on. I tried this code <a href="http://justtalkaboutweb.com/2008/02/04/css-web-20-glossy-text/" rel="nofollow noreferrer">here</a> but it didn't work for me, most likely because the h1 object is nested within a #header div. I imagine there's something to do with layers that I don't know about. Either I get a gradent block that is in front of everything or it's not appearing at all.</p>
  
  <p>In this particular instance this code makes a big gradient bar appear in front of everything:</p>
  
  <pre><code>    #header {
      clear:both;
      float:left;
      -moz-background-inline-policy:continuous;
      -moz-background-origin:padding;
      background:#080E73 url(../images/header-background.png) repeat-x left 0px;
      width:100%;
      max-height: 175px;
      color: #080E73;
  }
  #header h1 {
      margin-bottom: 0;
      color: #000;
      position: relative;
  }
  #header h1 span {
    background:url(../images/headline-text.png) repeat-x;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  </code></pre>
  
  <p>Here is the HTML (I'm using ruby on rails hence the notation)</p>
  
  <pre><code>     &lt;div id="header"&gt;
    &lt;% unless flash[:notice].blank? %&gt;
      &lt;div id="notice"&gt;&lt;%= flash[:notice] %&gt;&lt;/div&gt;
    &lt;% end %&gt;
          &lt;%= image_tag ("header-image.png") %&gt;
          &lt;h1&gt;&lt;span&gt;&lt;/span&gt;Headline&lt;/h1&gt; &lt;strong&gt;Byline&lt;/strong&gt;
  ... #navbar html...
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried playing with z-index but I couldn't come up with any good results. Any ideas?</p>