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,
 $colorstart:green,
 $colorend:green, 
 $opacitystart: 0, 
 $opacityend: 0)
{
	// url, no-repeat, border-box|content-box, center center
	background: linear-gradient(
		bottom left,
		 rgba($colorstart,$opacitystart), 
		 rgba($colorend,$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)