Search code examples
htmlcssgitbackground-imagegithub-pages

CSS background image will display locally but not on gh-pages, receive 404 error

Recently I was attempting to update my portfolio by adding a background image to the 'intro' class below. I added the image through CSS and when opening my portfolio locally in Chrome the image was displayed correctly. However, after committing my changes and then pushing up to my gh-pages the background image no longer displays. Instead I am left with:

Failed to load resource: the server responded with a status of 404 (Not Found) http://jlquaccia.github.io/jq-design/img/swirl_pattern.jpg

Can someone please help? I feel I have done this before without hitting any problems.. I'm also assuming that this should be an easy fix. My code is below:

HTML

<section class="intro">
        <h1 class="intro-title">{ Hello, I'm Jason Quaccia. <br> an aspiring Bay Area based Front-end Web <span class"dev-design">Developer</span> &#38; <span class"dev-design">Designer</span> }</h1>
        <div class="down-arrow">
            <a href="#about"><img class="down-arrow" src="./IMG/arrow-203-32.png" alt="Down Arrow"></a>
        </div>
    </section>

CSS

.intro {
    height: 35em;
    background: url(../img/swirl_pattern.jpg);
}
Solution

  • The URL is case sensitive, you are pointing to: http://jlquaccia.github.io/jq-design/img/swirl_pattern.jpg but you should be pointing to http://jlquaccia.github.io/jq-design/IMG/swirl_pattern.jpg instead (notice the IMG in uppercase)

    So your CSS should be like this:

    .intro {
    height: 35em;
    background: url(../IMG/swirl_pattern.jpg);
}

    (Notice how you are doing it right for the arrow)