Pass a linear gradient to a Sass mixin - css

Question

I would like to pass the entire linear-gradient to my mixin.
I've tried any way I could think of and it always results in it coming up 'none' which covers my image in white.
#mixin webp-backgroundGradient($imgpath, $type: '.jpg') {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 10%, white 80%), url('#{$imgpath}#{$type}');
}

Answer 1

Seems to work pretty good, see codepen...
https://codepen.io/joshmoto/pen/GRNegrP
I'm guessing its an issue with your image path maybe? Hard to tell with out seeing your console source.
I removed $type: '.jpg' from your mixin params and passed the image url directly.
#mixin webp-backgroundGradient($img) {
background-size: cover;
background-repeat: no-repeat;
background-image: linear-gradient(
to bottom,
rgba(white, 0.5) 10%,
rgba(white, 1) 90%
),
url("#{$img}");
}
.image {
height: 100vh;
#include webp-backgroundGradient("https://i.imgur.com/UNV29z8.jpeg");
}
And this is the output...
.image {
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 10%, white 90%), url("https://i.imgur.com/UNV29z8.jpeg");
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="image"></div>
Update to your comment...
#mixin to pass background image url and optional background gradient overlay...
See codepen example here https://codepen.io/joshmoto/pen/JjbzOoj
#mixin bg_img_gradient($img,$gradient:false) {
background-size: cover;
background-repeat: no-repeat;
#if $gradient != false {
background-image: #{$gradient}, url("#{$img}");
} #else {
background-image: url("#{$img}");
}
}
.image-1 {
height: 100vh;
width:50%;
float: left;
#include bg_img_gradient(
"https://i.imgur.com/UNV29z8.jpeg"
);
}
.image-2 {
height: 100vh;
width:50%;
float: left;
#include bg_img_gradient(
"https://i.imgur.com/UNV29z8.jpeg",
linear-gradient(
to bottom,
rgba(white, 0.5) 10%,
rgba(white, 1) 90%
)
);
}
And here is the css output...
.image-1 {
height: 100vh;
width: 50%;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-image:url("https://i.imgur.com/UNV29z8.jpeg");
}
.image-2 {
height: 100vh;
width: 50%;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 10%, white 90%), url("https://i.imgur.com/UNV29z8.jpeg");
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="image-1"></div>
<div class="image-2"></div>