Background Images not showing on Github Pages for Website

Question

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!

Patrick Mlr · Accepted Answer · 2017-01-12T07:38:02.067

3

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>

edited Jan 12 '17 at 07:38

answered Jan 12 '17 at 07:13

Patrick Mlr

2,955
2
16
25

Thanks for the response. I did that before for the link, but it still wouldn't load. I also read on a different thread that using .JPG would work, so I was trying that way too. However, for both ways it just shows a white page for me – Lawrence Cheng Jan 12 '17 at 07:22
Did you include `index.css`? Can't see it in your `index.html`. – Patrick Mlr Jan 12 '17 at 07:46
Thank you for the snippet. It seems to be working in there. However, when I put it into the main file it still shows up as blank for some reason. – Lawrence Cheng Jan 12 '17 at 07:50
I put the new link with the https into the fstPage class in index.css, and I also have the fstPage in index.html as well. Not entirely sure why it works in the snippet, but not in my main code – Lawrence Cheng Jan 12 '17 at 07:53
Looks like you don't include your `index.css`. Try to add `` in your head. – Patrick Mlr Jan 12 '17 at 07:55
Actually nevermind, it's showing up now. Thank you for all your help! – Lawrence Cheng Jan 12 '17 at 07:55

score 0 · Answer 2 · answered Jan 12 '17 at 07:41

0

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

answered Jan 12 '17 at 07:41

vicky prajapati

9
3

@Lawrence Cheng – vicky prajapati Jan 12 '17 at 07:52

score 0 · Answer 3 · answered Dec 04 '21 at 16:17

I was searching for all the forums. But none of which worked for me. Only workaround for me was to change the order of stylesheets in the head

I mean , if you are using multiple stylesheets, including those from bootstrap cdn with the locally saved one, always keep the local stylesheet on top.

Like this

 <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"

Background Images not showing on Github Pages for Website

3 Answers3

Linked