Question

0

151

Views

Background image issue

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.

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;
}

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T17:02:05.258Z

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.

0

151

Background image issue

2 answers

0

0

Find remote jobs

Andres GPT