Сочетание цвета и текстуры с CSS - с текстурой над текстурой

Question

Как добавить текстуру поверх сплошного цветного фона, используя элемент pseudo :after, сохраняя при этом шрифт поверх текстуры? Например, на веб-сайте Font Awesome.

Использование Удивительного сайта шрифта и CSS: Combine Texture and Color как ссылки я успешно обложили текстуру на моем цвет фона, но мой шрифт появляется под текстуру, а также.

Вот JSFiddle мой текущий код: http://jsfiddle.net/EvilClosetMonkey/xuBbq/

Я попробовал несколько щипков, глядя на несколько подобных эффектов, но я не выследил, что я пропускаю.

Как я могу принести шрифт «выше» текстуры?

Решение:

Принимая @ ответ JoshC в ниже я добавил следующий CSS, поэтому все содержимое (не только h1) появляются над текстурой.

.jumbotron .container 
{ 
    position: relative; 
    z-index: 1; 
} 

Answer 1

Вы можете просто добавить z-index к h1 элементу. Для этого требуется, чтобы элемент был расположен; поэтому добавить position:relative тоже:

UPDATED EXAMPLE HERE

.jumbotron h1 { 
    color: #fff; 
    font-size: 100px; 
    text-shadow: 4px 3px 0 #df4566, 9px 8px 0 rgba(0, 0, 0, 0.15); 
    position: relative; 
    z-index: 1; 
}