This is incredible. In CSS3 its possible to combine multiple CSS backgrounds together and/or even a gradient background too on the same element!

Let’s say you want to create a picture using two images and a gradient colored backdrop all together. First, lets create a container element in HTML.

<div id="photo"></div>

Traditionally you would write the CSS code with each background property on a separate line.

#photo {
    background-image: url("mike.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-image: linear-gradient(#eb01a5, #d13531);
}

However, this isn’t necessary. In CSS you can combine multiple properties all together using the shorthand background property, so you can apply all those values together, and multiple instances of values can be added in a comma-separated fashion.

#photo {
    background: url("mike.png") no-repeat center center, linear-gradient(#eb01a5, #d13531);
}

There is one limitation I am aware of. You cannot fade multiple backgrounds together (without using multiple divs) because you can’t change the opacity of a CSS background image. You can only alter the opacity of DOM elements.

Keep in mind that older versions of Internet Explorer do not support multiple backgrounds, and it will obey the rules of cascading order which dictate that when two properties of equal weight are present, the last one wins. And all code that cannot correctly be interpreted by the browser, is ignored.

You can find more information about this topic in this stackoverflow comment here.

https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element