CODEWITHSUNDEEP
htmlcsssass
MarqueedeLuxe
MarqueedeLuxe

Reputation: 11

Background-image Path using Sass with Gulp

My background-image is not loading! I searched stackoverflow for a solution but the stuff I found didn't solve my specific problem.

I use GULP as a build tool, the GULP SASS Compiler for SASS compiling and GULP BROWSER-SYNC as testserver.

My html

<section class="img_header">
 <div class="text_img_header_centered">
  <h1>blabla</h1> 
  <h2>blablablabla</h2>
</div>
</section>

My CSS:

.img_header {
  background-image: url('/assets/img/flugzeug_375x667.jpg');
}

file-structure

That's my file structure. main.css in folder css. blabla.jpg in img (as seen in the picture). My main.scss is in the dev-folder. Website is not online yet. But the background-image is not loading!. Any ideas? Only have one css-file included in this project. All other properties work just fine.

Thanks for your help :)

Upvotes: 1

Views: 744

Answers (1)

imgnx
imgnx

Reputation: 789

I can't really see the indention very well, but I think it's something like this.

.img_header {
  background-image: url('../../../assets/img/flugzeug_375x667.jpg');
}

In the future, you should try using a public folder and incorporating that into your build using something like Webpack. You could also use an absolute path if your file is served over the Internet.

Upvotes: 1

Related Questions