How define image in HTML tag for more styles?

Problem

So, I'm using something like this in my CSS:

li {
    background-image: url('example.png');
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.15))), url('avatar.png');
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:    -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:     -ms-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:      -o-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:         linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%) 100%), url('avatar.png');
}

But in each <li> will be a different image.

Problem courtesy of: Edoras

Solution

You can do this by using either the ::before or ::after pseudo-element. For example:

li:before {
    content: url('example.png');
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.15))), url('avatar.png');
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:    -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:     -ms-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:      -o-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:         linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%) 100%), url('avatar.png');
}

Demo.

Then, instead of specifying a background image, of which the rule will be overridden by the latter gradient styles, you'll be specifying a separate style, so it will show both of these.

Solution courtesy of: Joeytje50

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.