CSS“背景图片：url（…）”在我的网站上不起作用

Question

I created my portfolio on Gitlab Pages. My style.CSS work partially. background-image: url(..) doesn't display in navigator. However, everything else seems to be working. My content is in public/img/.png

I tried :

url(/img/.png);
url(public/img/.png);
url(/public/img/.png);

You can check my code here : https://medjaherirany.gitlab.io/resume/

Answer 1

Edit: I went into your code on the inspector, use background-image: url("../img/portrait0.png"); and it works. I will include a screenshot. This is used to go backwards in the directory.

I hope this helps.

Answer 2

As I can see in your CSS file you have used

figure {
  background: url(/img/portrait0.png);
  background-repeat: no-repeat;
  background-position: 80% 111px;
  height: 727px;
  background-size: 690px;
  background-color: #f2f2f2;
}

Change it to

figure {
  background: url("img/portrait0.png");
  background-repeat: no-repeat;
  background-position: 80% 111px;
  height: 727px;
  background-size: 690px;
  background-color: #f2f2f2;
}

Here actually your CSS says to look for img directory in the parent directory of "https://medjaherirany.gitlab.io/"

But your code is in https://medjaherirany.gitlab.io/resume That's why the browser was searching for "https://medjaherirany.gitlab.io/img/portrait0.png" But actually it is in "https://medjaherirany.gitlab.io/resume/img/portrait0.png"

Here I changed the URL of background image and I got the image working.

Hope this helped you. Feel free to ask any further doubts. Happy Coding