Background Image Won't Display on GitHub Pages

[nathan-friedman-designs]

Hi all,

I've published my portfolio using GitHub Pages, and all the code seems to work except that my background image won't display. That image (portBackground.jpg) is the lynchpin of my portfolio, because it sets the stage, mood, and story of the site's design. Following similar discussions I discovered on the internet, I've changed the image from a .png to a .jpg, moved it into an exclusive "images" folder, and I even cleared my browser's cache from the previous hour before I uploaded it. So it's bothering me to no end as to why the image won't display. Would you please help me out?

My GitHub Pages published site link: https://nathan-friedman-designs.github.io/nathanfriedmanportfolio/

My repository: https://github.com/nathan-friedman-designs/nathanfriedmanportfolio

Thanks in advance!

[antonblr]

You need to change the image url from url("images\portBackground.jpg"); to "../images/portBackground.jpg"

• backslash to forward slash
• one level up (../), since images/ dir is outside of the css dir

https://github.com/nathan-friedman-designs/nathanfriedmanportfolio/blob/420f4f5ea4aeccc41ba89e4212eb818f77136e34/css/index.css#L6

[nathan-friedman-designs]

Yes, thank you, it worked!

[m3c-ode]

But then, locally, it won't be working anymore. How do you adapt with this?

[DarkOphanim]

Works on local too! Make sure everything is correct.
example
This is not gonna work => background-image: url(/images/myImage.png); or
background-image: url(images/myImage.png); or
background-image: url(./images/myImage.png); or
background-image: url(../images/myImage.png); or
This will work (local or online) => background-image: url("../images/myImage.png");

[jdevfullstack]

seems it's already fixed by now ?

[JoeMille]

cheers for posting this it took me ages to work that out

[anjylo]

Also had this problem but my solution was removing the quote from the path.

e.g
background: url(path/to/file/)

[JoeMille]

Remove the .. from the file paths as that directs them somewhere else so if a file path is ../assets/images/image.jpg then remove the “..” so it would be /assets/images/image.jpgOn 31 Aug 2023, at 17:37, Şahin Əliyarlı ***@***.***> wrote: same problem here, did you find any solution? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[JoeMille]

Sorry I spoke too soon, reading back over my CSS file from my last submission I removed the “quotes” inside URL so it would be- url(../images/pattern-background-desktop.svg)After doing this it fixed the problem of my images not displaying when page deployed. Hope this helps!Sent from my iPhoneOn 31 Aug 2023, at 18:49, Şahin Əliyarlı ***@***.***> wrote: But then, locally, it won't be working anymore. How do you adapt with this? Remove the .. from the file paths as that directs them somewhere else so if a file path is ../assets/images/image.jpg then remove the “..” so it would be /assets/images/image.jpgOn 31 Aug 2023, at 17:37, Şahin Əliyarlı @.> wrote: same problem here, did you find any solution? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.> i tried these solutions but none of them worked: background-image: url(""); background-image: url("./images/pattern-background-desktop.svg"); background-image: url("/images/pattern-background-desktop.svg"); —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[mondoakim]

Hi guys am faced with the same problem my background image wont display in the download file. What am I missing? Please help! My css code is below.
.background{
width:100%;
height:100vh;
background-image: url(/img/bottles.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: fixed

[mondoakim]

Hi thank you very much for your response and help well appreciated. I now have another problem I cant get my carousel slideshow to work even after typing the right code and CDN links. What am I missing? Here is the code below I look forward to your response.

<title>Tap & Bottles</title> <script src="https://kit.fontawesome.com/ae75e7a7d4.js" crossorigin="anonymous"></script>

GBP

ERU-Euro

Tap & Bottles

Sign In Create An Account

• HOME
• FEATURES
• COLLECTION
• SHOP
• ABOUT US

<!--First Slider-->
<div class="container-fluid p-0">
  <div class="site-slider">
<div class="slider-one">
<div>
  <img src="/img/shopify.webp" class="img-fluid" alt="banner 1" width="500" height="250">
</div>
<div>
  <img src="/img/shopify2.webp" class="img-fluid"   alt="banner 2" width="500" height="250">
</div>
<div>
  <img src="image2/beer glass.jpg" class="img-fluid"   alt="banner 2" width="500" height="250">
</div>
</div>
  </div>
</div>
<!--/First Slider-->

<script src="/JS/tapandbottles.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> </script>

[mondoakim]

/** First Slider */
$(".slider-one").slick();

[Diogo010101]

I tested all the ways and they all worked, but you need a few minutes for them to work on the Git-Hub pages.

https://diogo010101.github.io/projeto_cafeteria/

[paocorrales]

Hi,

I have the same issue but none of the possible solutions worked for me. The images are where they are supposed to be but I keep getting a 404. I deployed the web to netflify and it works there.

Github pages> https://rse-r.github.io/intro-programacion/
Netflify> https://intro-programacion.netlify.app/
Repository> https://github.com/rse-r/intro-programacion

The issue is with the icons inside each box.

[mostafa16dev]

Hi,

check the path of images, for me it was ../images/bg-card-front.png and I changed it to ./images/bg-card-front.png to point to the current directory of the project before it was referencing the root directory