Skip to content

Instantly share code, notes, and snippets.

@stevehanson

stevehanson/transparent_bg.scss

Last active September 27, 2018 19:50
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stevehanson/fc20c3fd9dfadeb0ea57 to your computer and use it in GitHub Desktop.
Save stevehanson/fc20c3fd9dfadeb0ea57 to your computer and use it in GitHub Desktop.
Download ZIP
Mixin to achieve background-image with overlay
Raw
transparent_bg.scss
// see http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity
@mixin transparent_bg($bg_image, $overlay_opacity: "", $overlay_color: "") {
background: -webkit-linear-gradient(left, rgba($overlay_color, $overlay_opacity), rgba($overlay_color, $overlay_opacity)), url($bg_image) no-repeat;
background: -moz-linear-gradient(left, rgba($overlay_color, $overlay_opacity), rgba($overlay_color, $overlay_opacity)), url($bg_image) no-repeat;
background: -o-linear-gradient(left, rgba($overlay_color, $overlay_opacity), rgba($overlay_color, $overlay_opacity)), url($bg_image) no-repeat;
background: -ms-linear-gradient(left, rgba($overlay_color, $overlay_opacity), rgba($overlay_color, $overlay_opacity)), url($bg_image) no-repeat;
}
Raw
usage.scss
.my-div {
@include transparent_bg('/bg-image.jpg', 0.4, #000); // black overlay with 40% opacity
background-size: cover; // can use any regular css properties to style background
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment