I'm a CSS newbie trying to get some text gradients going on. I tried this code here 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.

In this particular instance this code makes a big gradient bar appear in front of everything:

    #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;
}

Here is the HTML (I'm using ruby on rails hence the notation)

     <div id="header">
  <% unless flash[:notice].blank? %>
    <div id="notice"><%= flash[:notice] %></div>
  <% end %>
        <%= image_tag ("header-image.png") %>
        <h1><span></span>Headline</h1> <strong>Byline</strong>
... #navbar html...
</div>

I tried playing with z-index but I couldn't come up with any good results. Any ideas?