How to use two backgrounds for one element and put second background on top of first?

Question

In a project I need to make headings like this and I want to use with less image and markup because Texture will be the same but Gradient are different in different sections.

I have 3 things in heading.

1. Heading text
2. A texture over the gradient and under the heading text
3. A gradient behind the texture

like this in a combined form

I'm only considering Web-Kit based browsers. I can make gradient with CSS. I can put heading text and can add shadow in css.

I want to make this thing without using any image or less image. So question is, Is it possible to make texture in css and If it's not possible then what is the best Semantic way to achive this heading with one transparent texture image?

I want to make this with this code

<h1> Heading Level 1 </h1>

So using CSS can i use 2 backgrounds 1) gradient made by css and 2) on the top of the gradient I want to put transparent image of texture with repeat-x

And If we can't put background in layers then what other way you would suggest?

Will I have to use with extra span and z-index

Answer 1

If you only care about recent WebKit browsers, you can use CSS3's multiple backgrounds:

See: http://jsfiddle.net/thirtydot/xCnZs/

HTML:

<h1>Heading Level 1</h1>

CSS:

h1 {
    font: 42px/1 Georgia, serif; 
    color: #fff;
    margin: 0;
    padding: 12px;

    background: url(http://i.stack.imgur.com/rgOES.png) top left repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));

    text-shadow: 2px 2px 3px #000;
}

---

I used Photoshop to quickly make this image:

It's a transparent .png with just a random texture on it. It doesn't tile very well, but I didn't try to make it do so; it was just to show the concept.

It would be very difficult to make the texture with pure CSS. Though probably not impossible.

Answer 2

I'd recommend using embedded elements. Don't use a span because spans are inline elements and you'll have to make them display:block to get the correct overlay. I'd but the gradient in the outer-most element and your transparent texture inside it. Semantically your probably should have a div on the outside with you h1 inside it like so.

<div class="gradient">
    <h1 class="texture">Heading Level 1</h1>
</div>

Good news! You don't have to worry about only going webkit for the gradients.

    .gradient { background: -webkit-gradient(linear, left top, left bottom, from(#cfcdd2), to(#fff)); 
    background: -moz-linear-gradient(top,  #cfcdd2,  #fff); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcdd2', endColorstr='#000000'); }
    .texture { background: url('myimage.png'); }

The above code will give you a gray to white gradient (top to bottom) just change out the colors with your colorscheme. It works in most browsers (not ie7 but yes ie8).

I'll be happy to help further if you need advice.