Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

applying z-index to a :pseudo element

applying z-index to a :pseudo element

Problem

I have the following CSS rules applied to a DIV:

.icon {
    position:relative;
    display: inline-block;
    width: 90px;
    height: 94px;
    background: url("test-icon-sprite.png") no-repeat scroll transparent;
    background-position: 0 0;
    overflow: hidden;
    z-index: 1000;
}
.icon.plaque:after {
    content: url("test-icon-plaque.png");
    position:absolute;
    width: 90px;
    height: 94px;
    z-index: 1
}

...

What happens is that the image in the Pseudo Element is positioned on top of the image in the other element. That's not what I want! Is there any way to fix this?

My goal is to create an icon with an optional backplate (plaque) using only one html element, is it doable?

Problem courtesy of: Björn Andersson

Solution

Use multiple backgrounds.

.icon {
    background-image: url(test-icon-sprite.png);
}
.icon.plaque {
    background-image: url(test-icon-sprite.png), url(test-icon-plaque.png);
}
Solution courtesy of: Alexander Støver

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

applying z-index to a :pseudo element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×