CODEWITHSUNDEEP
htmlcsspseudo-element
Nicholas Pappas
Nicholas Pappas

Reputation: 10624

Combining Color and Texture with CSS - With Font Above Texture

How can I add a texture over top a solid color background using the pseudo :after element, while keeping the font on top of the texture? Such as that used on the Font Awesome website.

Using the Font Awesome website and CSS: Combine Texture and Color as references I have successfully overlaid the texture onto my background color, but my font appears under the texture as well.

Here is a JSFiddle of my current code: http://jsfiddle.net/EvilClosetMonkey/xuBbq/

I've tried several tweaks, looking over multiple similar effects, but I have not tracked down what I am missing.

How can I bring the font "above" the texture?

Solution:

Taking @JoshC's answer below I added the following CSS, so all contents (not just h1) appear above the texture.

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

Upvotes: 1

Views: 691

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241118

You could simply add a z-index to the h1 element. This would require the element to be positioned; therefore add position:relative too:

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;
}

Upvotes: 1

Related Questions