Skip to content

Instantly share code, notes, and snippets.

@vajrasar
Last active September 20, 2017 14:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vajrasar/048e086b23099ecb1c8d52694b69daa3 to your computer and use it in GitHub Desktop.
Save vajrasar/048e086b23099ecb1c8d52694b69daa3 to your computer and use it in GitHub Desktop.
To have image over gradient along with all browser support
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment