0

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

JMM
  • 13
  • 6

2 Answers2

0

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"

propanibutan
  • 1
  • 1
  • Yes, I have checked and re-checked the path as well as the existence of the file. – JMM Mar 03 '23 at 17:47
0

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.

JMM
  • 13
  • 6