Positioning Layers and text gradients with css

Question

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?

Answer 1

When you say "this code makes a big gradient bar appear in front of everything", the gradient is supposed to appear in front of everything, but it's supposed to be transparent and the same colour as your background colour.

Is it possible that you've not exported the PNG correctly? or that the block of colour you've applied the transparency to isn't the correct colour?