/*
BACKGROUND IMAGE w/ TINT MIXIN
1. Background Image (cover - fullscreen bg)
2. Background Tint (no image - linear-gradient)
3. Background Image w/ Tint
4. Background Image w/ Tint (cover - fullscreen bg)
*/
// 1. Background Image (cover)
// optional:
// $background-top: default = "center" - sets the "top" value of the background position
// $background-left: default = "center" - sets the "left" value of the background position.
// $background-attachment: Defaults to "fixed" - allows you to specify background attachment.
@mixin cover-background($img-uri, $background-top:"center", $background-left:"center", $background-attachment:"fixed") {
background: url($img-uri) no-repeat unquote($background-top) unquote($background-left) unquote($background-attachment);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
// 2. Background Tint
@mixin bgtint($r, $g, $b, $a) {
background: -webkit-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a));
background: -moz-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a));
background: -o-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a));
background: linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a));
}
// 3. Background Image w/ Tint
@mixin bgtintimg($r, $g, $b, $a, $imgurl) {
background: -webkit-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a)), url($imgurl);
background: -moz-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a)), url($imgurl);
background: -o-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a)), url($imgurl);
background: linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a)), url($imgurl);
}
// 4. Background Image w/ Tint (cover)
@mixin bg-covertint ($r, $g, $b, $a, $imgurl, $background-top:"center", $background-left:"center", $background-attachment:"fixed") {
background: -webkit-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a)), url($imgurl) no-repeat unquote($background-top) unquote($background-left) unquote($background-attachment);
background: -moz-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a)), url($imgurl) no-repeat unquote($background-top) unquote($background-left) unquote($background-attachment);
background: -o-linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a)), url($imgurl) no-repeat unquote($background-top) unquote($background-left) unquote($background-attachment);
background: linear-gradient(rgba($r, $g, $b, $a), rgba($r, $g, $b, $a)), url($imgurl) no-repeat unquote($background-top) unquote($background-left) unquote($background-attachment);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.