Background Images not showing on Github Pages for Website

问题

I've looked at some other threads on Stack Overflow regarding this problem, but for some reason they don't seem to be working. I've checked things like the path directory for the image, and I think that it's correct. Here's a link to my repo for the website on github pages: https://github.com/lawrencecheng123/lawrencecheng123.github.io

In my repo there is a "Seattle.jpg" image that I'm trying to set as the background of the first page of my website, which is referenced by the "fstPage" class on line 81 of the "index.html" file and line 321 of the "index.css" file in the repo.

Thank you for the help!

回答1:

It fails because you named your file wrong. Inside of your index.css, you wanted to use a file named Seattle.JPG.

Your file is named Seattle.jpg. Fix the ending and add https://.

Here's the right link: https://lawrencecheng123.github.io/Seattle.jpg

Complete CSS:

.fstPage {
    background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
    /*background-color: lightgray;*/
    height: 700px;
    width:100%;
    background-size:cover;
}

Working snippet:

.fstPage  {
    background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
    /*background-color: lightgray;*/
    height: 700px;
    width:100%;
    background-size:cover;
}

<div class="fstPage"></div>

回答2:

first import index.css file in your index.html file like

change (1) :

<link rel="stylesheet" href="index.css">

and then you have to update your class as mentioned below

change(2):

.fstPage {
            background-image:url("Seattle.jpg");
            /*background-color: lightgray;*/
            height: 700px;
            width:100%;
            background-size:cover;
        }

and I hope it will work fine for you also

来源：https://stackoverflow.com/questions/41607049/background-images-not-showing-on-github-pages-for-website

标签

html

css

github

github-pages