Question

I swear I’ve seen people add multiple background images to an element using the :after selector. For whatever reason, I can’t get it to work. What am I doing wrong? Can anyone point me to a working example?

#el li { background:url(image1.jpg) top center;}
#el li:after { background:url(image2.jpg) bottom center;}

Thanks!

Answer 1

As Blender notes, there is some type of dom node added as content to the end of the element’s content. However, you also need to provide some kind of content AFAICT to make it work.

<ul id="el">
    <li>Hello world</li>
</ul>

#el li {
    background:url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG) top center no-repeat;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
#el li:after {
    background:url(http://www.gravatar.com/avatar/05a3a91994b86e4e45246b57b0ec3c7d?s=128&d=identicon&r=PG) bottom center;
    content: " ";
    display: block;
    position: relative;
    height: 500px;
    z-index: -100;
}

http://jsfiddle.net/QhUsS/