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(https://i.sstatic.net/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.