Невозможно увидеть фоновое изображение при размещении на GitHub Pages - PullRequest
0 голосов
/ 13 января 2020

Я пытался исправить путь, чтобы мое фоновое изображение отображалось при размещении на GitHub. Я могу показать его при просмотре моего приложения из скобок, а не при его размещении. Мой CSS определенно работает, но я просто не могу показать свое изображение. Я смотрю на другие темы, но, похоже, ничего не меняет дело. Любая помощь будет оценена. Мой сайт репо https://github.com/Jennp1987/644_final

My CSS...
#backgroundImage {
padding-top: 3%;
padding-bottom: 97%;
background-image: url('https://jennp1987.github.io/644_final/images/pizza_bkground.png');
background-size: cover;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

/*I've also tried this*/
/*#backgroundImage {
    padding-top: 3%;
    padding-bottom: 97%;
    background-image: url('../../../images/pizza_bkground.png'); 
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;


}*/
/*And this*/
/*#backgroundImage {
    padding-top: 3%;
    padding-bottom: 97%;
    background-image: url('../images/pizza_bkground.PNG'); 
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;


}
*/

Ответы [ 2 ]

0 голосов
/ 13 января 2020

Использование вашего css на самом деле хорошо работает:

#backgroundImage {
  padding-top: 3%;
  padding-bottom: 97%;
  background-image: url('https://jennp1987.github.io/644_final/images/pizza_bkground.png');
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
<div id="backgroundImage"></div>
0 голосов
/ 13 января 2020

После десятой попытки вышеприведенный код сработал!

background-image: url ('https://jennp1987.github.io/644_final/images/pizza_bkground.png');

...