To have image over gradient along with all browser support

snippet.css

/* In this particular instance client wanted to have gradient all over the background and a PNG
* image sitting at the bottom of the container
* /

.selector {
background-image: url(/path-to-image.png), -webkit-gradient(linear, left top, left bottom, from(rgba(74,177,253,1)), to(rgba(74,177,253,0.3))); /* For Safari 5.1 to 6.0 */
background-image: url(/path-to-image.png), -o-gradient(linear, left top, left bottom, from(rgba(74,177,253,1)), to(rgba(74,177,253,0.3))); /* For Opera 11.1 to 12.0 */
background-image: url(/path-to-image.png), -moz-gradient(linear, left top, left bottom, from(rgba(74,177,253,1)), to(rgba(74,177,253,0.3))); /* For Firefox 3.6 to 15 */
background-image: url(/path-to-image.png), linear-gradient(linear, left top, left bottom, from(rgba(74,177,253,1)), to(rgba(74,177,253,0.3))); /* Standard syntax (must be last) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="rgba(74,177,253,1)",endColorstr="rgba(74,177,253,0.3)",GradientType=0), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path-to-image.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
}