CODEWITHSUNDEEP
htmlcss
Björn Andersson
Björn Andersson

Reputation: 889

applying z-index to a :pseudo element

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
}

...

<div class="icon plaque"></div>

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?

Upvotes: 0

Views: 210

Answers (1)

Alexander St&#248;ver
Alexander St&#248;ver

Reputation: 645

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

Upvotes: 1

Related Questions