Skip to content

Instantly share code, notes, and snippets.

@richstrauss
Created October 8, 2016 10:23
Show Gist options
  • Save richstrauss/c5268a8f8d033bbd49efe8a8a89eb890 to your computer and use it in GitHub Desktop.
Save richstrauss/c5268a8f8d033bbd49efe8a8a89eb890 to your computer and use it in GitHub Desktop.
Tinted Image w/ Multiple Backgrounds
.tinted-image {
width: 300px;
height: 200px;
background:
/* top, transparent red */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}
// http://codepen.io/chriscoyier/pen/CkFni
<div class="tinted-image"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment