Difference between revisions of "Useful Mixins"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
== Create Full Background Image == | == Create Full Background Image == | ||
<pre> | <pre> | ||
@mixin backImage($ | @mixin backImage($url, $repeat: no-repeat, | ||
background: url($ | $origin:border-box, | ||
-webkit-background-size: | $position:center center, | ||
-o-background-size: | $size:cover){ | ||
background-size: | // 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; | |||
} | } | ||
</pre> | </pre> | ||
==[[#Create Full Background Image|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ==[[#Create Full Background Image|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ||
Revision as of 13:26, 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;
}