Difference between revisions of "Useful Mixins"
Jump to navigation
Jump to search
Line 15: | Line 15: | ||
</pre> | </pre> | ||
== Background Image with gradient == | |||
<pre> | |||
@mixin backImage($image, $repeat: no-repeat, $origin:border-box, $position:center center, $size:cover, $grdir: bottom left, $opacitystart: 0, $opacityend: 0){ | |||
// url, no-repeat, border-box|content-box, center center | |||
background: linear-gradient( | |||
bottom left, | |||
rgba(blue,$opacitystart), | |||
rgba(blue,$opacityend) | |||
), | |||
url($image); | |||
background-repeat: $repeat; | |||
background-origin: $origin; | |||
background-position: $position; | |||
-webkit-background-size: $size; | |||
-o-background-size: $size; | |||
background-size: $size; | |||
} | |||
</pre> | |||
To use the mixin without passing all parameters, pass it the variable name with the value | |||
@include backImage(image.jpg, $opacitystart: .5, $opacityend: .8) | |||
==[[# | ==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== |
Revision as of 18:11, 23 September 2016
Create Full Background Image
@mixin backImage($url, $repeat: no-repeat, $origin:border-box, $position:center center, $size:cover) { // url, no-repeat, border-box|content-box, center center background-image:url($url); background-repeat: $repeat; background-origin: $origin; background-position: $position; -webkit-background-size: $size; -o-background-size: $size; background-size: $size; }
Background Image with gradient
@mixin backImage($image, $repeat: no-repeat, $origin:border-box, $position:center center, $size:cover, $grdir: bottom left, $opacitystart: 0, $opacityend: 0){ // url, no-repeat, border-box|content-box, center center background: linear-gradient( bottom left, rgba(blue,$opacitystart), rgba(blue,$opacityend) ), url($image); background-repeat: $repeat; background-origin: $origin; background-position: $position; -webkit-background-size: $size; -o-background-size: $size; background-size: $size; }
To use the mixin without passing all parameters, pass it the variable name with the value
@include backImage(image.jpg, $opacitystart: .5, $opacityend: .8)