Background image issue

user_13086687 0
Viewed 75

I am trying to add a background image, but it does not display when checking in the browser, and nothing is shown. I am compiling the .scss into a CSS folder.

Here I attach an image of my folders. Folders root

Here is how I am writing it with the background property:

.graphic-design {
  display: block;
  width: 100vw;
  height: 30vh;
  // background: yellowgreen;
  margin-top: -8vh;
  background-image: url('./images/mobile/image-graphic-design.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
css html javascript
2 Answers

This must be an issue with the path. You can debug yourself. Check Your Developer tools (F12)

Go to Application Tab and load your application / Page again.

You will be able to see if your image is successfully loaded from the path. You may see 404 error here Check the URL path and adjust the code to set the correct path.

enter image description here

user_41765260

Maybe this works:

background-image: url('../images/mobile/image-graphic-design.jpg');

Use ../ to go up one level and then go to images folder.

If you want to read more about file path in css, you can read this article.

user_110804850
Related