Why CSS link behave weird?

I'd never used scss, but as I understand, some component/plugin in VS Code will transpile SCSS into CSS, and put the resulting file uin the ~/css folder.

So, your CSS should be background: url("../images/bg-pattern-desktop.svg");, since booth the browser and VS Code should resolve that URL relative to the ~/css folder.

This URL can be read as: "From current folder (CSS) go up to its inmediate parent ("base-apparel-comming-so...) and then enter in the image folder and get the file named bg-pattern-desktop.svg"

Why the dummy example also (kind of) works:

The URL in background: url("dummy-text/../../images/bg-pattern-desktop.svg"); also works because that url, resolved relative to ~/css, gives the same result as background: url("../images/bg-pattern-desktop.svg");.

Your scss compiles and gets stored in css folder. As I can see from folder structure, It should have path like

background: url("../images/bg-pattern-desktop.svg");

Because actual css will be used from css folder and image folder is one level outside from css source dir.

In SCSS, our code is converted to CSS and in our HTML file we are linking to our CSS file. When it comes to images and external resources we must not link path relative to our SCSS file but to our CSS file.

So you should use background: url(...) property relative to the CSS file within your css folder.

That should become : ' background: url('./../images/bg-pattern-desktop.svg') Assuming your CSS file is right within you css folder.

The problem is that you're using a path that's relative to the _responsive file that you probably import in main.scss,

background: url("../images/bg-pattern-desktop.svg");

When you import a file, the URLs should be relative to the importing file :)