user2915718 user2915718 - 3 months ago 34
CSS Question

CSS Background image url for Github pages



body {
background-image: url("/module-2/assets/green_cup.png");
}

/* Images */

#box1 {
background-image: url("/module-2/assets/chicken.jpg");
opacity: 0.8;
}

#box2 {
background-image: url("/module-2/assets/beef.jpg");
opacity: 0.8;
}

#box3 {
background-image: url("/module-2/assets/sushi.jpg");
opacity: 0.8;
}





The images in my github pages are not displaying. I have read through similar questions already posted and have not found the answer to my question.

What is the correct background image url to use for images in style.css for github pages?

This is my repository url: https://github.com/miriam-z/coursera-test/tree/gh-pages

Answer

Remove slashes from beginning of the path, because they cause to act like: xxx.github.io/module-2/...

Not xxx.github.io/project/module-2/...

body {
  background-image: url("../assets/green_cup.png");
}

/* Images */

#box1 {
  background-image: url("../assets/chicken.jpg");
  opacity: 0.8;
}

#box2 {
  background-image: url("../assets/beef.jpg");
  opacity: 0.8;
}

#box3 {
  background-image: url("../assets/sushi.jpg");
  opacity: 0.8;
}

This ../ is needed because you are calling relative path from your css file, not html.

Edit: I follow full scenario, now paths are correct.

Comments