Question

I am trying to add two classes to one element with two different background images positioned on its different space. But when I apply another class it is overriding first class background image. See below

<li class="first">

li.first {background:url(images/first.png)no-repeat center top}
li.second{background:url(images/second.png)no-repeat right center}

So I want to merge both background when apply both class on li element like

<li class="first second">

Is there any way to achieve this?

Answer 1

I can think of two ways.

You could add the second background not to the element itself, but to a pseudo-element absolutely positioned such that it fully covers the li. However, if you wish to do this for more than three classes & backgrounds, then this method doesn’t work as you can only have two pseudo-elements (:before and :after).

Or you could simply add the first background to the second class as well.

DEMOS

In both cases, the HTML would be something like:

<li class="first second"></li>

The relevant CSS in the first case:

li { 
    background-repeat: no-repeat;
    background-size: 50%;
}
.first {
    background-image: linear-gradient(rgba(102,37,93,.95) 50%, transparent 50%);
    background-position: 50% 0;
}
.second {
    position: relative;
}
.second:after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: radial-gradient(rgba(255,255,255,.2), rgba(255,0,0,.9));
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: 50%;
    content: '';
}

… and in the second case:

li { 
    background-repeat: no-repeat;
    background-size: 50%;
}
.first {
    background-image: linear-gradient(rgba(102,37,93,.95) 50%, transparent 50%);
    background-position: 50% 0;
}
.second {
    background-image: radial-gradient(rgba(255,255,255,.2), rgba(255,0,0,.9)), 
        linear-gradient(rgba(102,37,93,.95) 50%, transparent 50%);
    background-position: 100% 50%, 50% 0;
}