Useful Mixins

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)