Search code examples
csssassbackground-image

SASS// Background Image path issue

I'm trying to set a background image for a class.

This is my file structure using laravel-mix:

enter image description here

What's wrong with my code in app.scss file?

.header-bg {
   background-image: url('img/illustration-main.jpg');
   background-size: cover;
}

Tried this but also not working:

.header-bg {
   background-image: url(require('img/illustration-main.jpg'));
   background-size: cover;
}

Here in case the content of the img folder:

enter image description here

Solution

  • If your css file is being built to dist/app.css your image path should be relative to this. Since your img folder is sibling to dist, try url('../img/illustration-main.jpg')