Positioning Layers and text gradients with css
- by Kenji Crosland
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?
