SCSS file use of image / url() won't appear in page styles

Question

Two weeks ago I converted all my css to scss files. Everything except the use of a background image is working. I have been researching solutions to no avail because it seems that similar questions have all gone unanswered for several years.

Ideally I would like the image to be set as a variable, but I can't even get it to work directly in a selector like this:

.container {
background-image: url(../../media/wood8.jpg);
}

I know my path is correct and it works perfectly in a regular css file but the Scss file converted to the final css appears to be the exact same and yet it doesn't work.

I am confused by what I am doing wrong.

My variable looks like this:

$background1: linear-gradient(
90deg, 
rgba(0, 0, 12, .70)0%,
rgba(14, 39, 106, 0.2)30%, 
rgba(21, 43, 102, 0.2)55%, 
rgba(22, 31, 55, 0.2)75%, 
rgba(0, 0, 12, .60))95%,
url("../../media/wood8.jpg");

My call for this variable is this:

.base1 { 
background: $background1; color: $lt;
}

Please note that the linear-gradient actually appears, but NOT THE IMAGE that is supposed to go with it. Additionally the gradient only appears with "background" - any attempt to use "background-color" or "background-image" fails to show anything at all.

Alternately I have tried making my image its own variable:

$wood8: url(../../media/wood8.jpg);

Attempting to call it into $background1 is a fail. So is trying to use it in a class selector, as such:

.container {
background-image: $wood8;
}

I have also tried variables written and respectively called in as:

$imgPath: "../../media";
$wood8: "wood8.jpg";
background: url(#{$imgPath}/#{$wood8});


$wood8: "../../media/wood8.jpg";
background: url(#{$wood8});

$wood8: url("../../media/wood8.jpg");
background: $wood8;

$wood8: "url(../../media/wood8.jpg)";
background: $wood8;

These links are the questions most similar in nature to what I am struggling with, but they aren't exact and have gone unanswered for several years. Is it possible to pass background image as variable - vuejs + scss, Background image url() not compliling using sass, SCSS Background Image URL Rails 4

Answer 1

Images can be used as variables. For this specific issue, the file path to the image may be correct according to the location of your variables.scss, but don't forget that ultimately the page runs off of the converted main.css file, so you must adjust your path to be correct from the main.css location.

instead of:

$wood8: url(../../media/wood8.jpg);

try backing it up a level:

$wood8: url(../media/wood8.jpg);

This should fix your issues.

Answer 2

Do you check path? Background-image always work correct on SASS. Wait, you tried without variables? Because I checked this and its work:

background: linear-gradient(
    90deg, 
    rgba(0, 0, 12, .70)0%,
    rgba(14, 39, 106, 0.2)30%, 
    rgba(21, 43, 102, 0.2)55%, 
    rgba(22, 31, 55, 0.2)75%, 
    rgba(0, 0, 12, .60))95%, url(/src/assets/top-background.png) no-repeat;

I suppose you cant put variables in property like "background"