CSS Multiple background

There is a pretty cool property called background in css3, which gives us an option to add multiple backgrounds such as background color (solid/transperant) and an image.

I was usually using the method of giving image in background-image property and auto generated gradient color code for background color which is as shown below

I use to generate gradient css using this site.

background-color: #38BAC9;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#57BEED), to(#38BAC9));
background: -moz-linear-gradient(top, #57BEED 0%, #38BAC9 100%);

In this case, the multiple background works fine in all the browsers except IE. Later I came across the solution why it acts wired in IE. It is because when there is a css2 property in the code then IE considers that as priority. 

And here is a valid code for all the browsers

Demo 1 - BG image and gradient BG-Color

<div class="bg"> </div>​

.bg{
    width:800px; height:750px;
    background: #38BAC9 url(http://www.google.com/logos/2012/india12-hp.jpg) 10% no-repeat;
    background:url(http://www.google.com/logos/2012/india12-hp.jpg) center no-repeat, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#57BEED), to(#38BAC9));
    background:url(http://www.google.com/logos/2012/india12-hp.jpg) center no-repeat, -moz-linear-gradient(top, #57BEED 0%, #38BAC9 100%);    
}​

You can check the live demo here http://jsfiddle.net/6kgcE/8/

Demo 2 - Multiple Images

You can also add Multiple images to the same div

<div class="bg"> </div>​

.bg{
    width:800px; height:750px;
    background: #38BAC9, url(http://www.google.com/logos/2012/indonesiaind12-hp.jpg) top left no-repeat, url(http://www.google.com/logos/2012/india12-hp.jpg) 10% no-repeat;
    background:url(http://www.google.com/logos/2012/indonesiaind12-hp.jpg) top left no-repeat, url(http://www.google.com/logos/2012/india12-hp.jpg) center no-repeat, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#57BEED), to(#38BAC9));
    background:url(http://www.google.com/logos/2012/indonesiaind12-hp.jpg) top left no-repeat, url(http://www.google.com/logos/2012/india12-hp.jpg) center no-repeat, -moz-linear-gradient(top, #57BEED 0%, #38BAC9 100%);
}​

Live Demo for multiple images http://jsfiddle.net/6kgcE/10/


Unfortunately this wont work for IE. here is the another method for IE. This method supports all other modern browsers too but the reason why I used above method is, that is easier to add all properties in single line. 


.bg{
    width:800px; height:750px;
    background: url(http://www.google.com/logos/2012/indonesiaind12-hp.jpg), url(http://www.google.com/logos/2012/india12-hp.jpg);
background-position:top, bottom;
background-repeat:no-repeat, no-repeat   
}​