CODEWITHSUNDEEP
htmlcssgithubgithub-pages
Lawrence Cheng
Lawrence Cheng

Reputation: 13

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!

Upvotes: 1

Views: 15055

Answers (3)

Ae Ri
Ae Ri

Reputation: 242

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"

Upvotes: 0

vicky prajapati
vicky prajapati

Reputation: 7

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

Upvotes: 0

Patrick Mlr
Patrick Mlr

Reputation: 2965

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>

Upvotes: 3

Related Questions