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
}
