CODEWITHSUNDEEP
cssreactjsgithub-pages
Kabir Thakur
Kabir Thakur

Reputation: 15

Background image not working on github pages

I am trying to host my portfolio website on Github pages but the background images is not loading. I got all other images to load and tried the following for my background image.

When I inspect the element The error I am getting is

GET https://kabirthakur.github.io/assets/herobg-ecbfddc8.png 404. index-a71a2bc8.css:1

The CSS file is coming up with the correct name and location of the background image

    .bg-hero-pattern {     background-image: url(/assets/herobg-ecbfddc8.png)

Link to GitHub page - https://kabirthakur.github.io/portfolio Link to GitHub repo - https://github.com/kabirthakur/portfolio

In tailwind.config.js I added the '..' behind the backslash

    backgroundImage: {           "hero-pattern": "url('../src/assets/herobg.png')",         }

     .bg-hero-pattern {     background-image: url(/assets/herobg-ecbfddc8.png)

I tried adding '.' and still get the 404 error with

     .bg-hero-pattern {     background-image: url(./src/assets/herobg.png) }

Upvotes: 0

Views: 352

Answers (1)

Tao Zhu
Tao Zhu

Reputation: 779

You can execute npm run build in your repo dir from commandline, and you will get the following output:

> [email protected] build
> vite build

vite v4.4.7 building for production...
transforming (22) src/components/Tech.jsx
./src/assets/herobg.png referenced in /tmp/portfolio/src/index.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ 391 modules transformed.
dist/index.html                                 0.46 kB │ gzip:   0.30 kB
dist/assets/threejs-1d0654a8.svg                0.69 kB │ gzip:   0.38 kB
dist/assets/menu-242d80a8.svg                   1.09 kB │ gzip:   0.45 kB
dist/assets/close-ad0e0ca6.svg                  1.34 kB │ gzip:   0.55 kB
dist/assets/reactjs-966214a8.png                4.10 kB
dist/assets/figma-184a11e6.png                  4.75 kB
dist/assets/tesla-4c857950.png                  4.95 kB
dist/assets/tailwind-6ece120d.png               5.24 kB
dist/assets/html-92b76a73.png                   5.32 kB
dist/assets/css-79a7f026.png                    5.48 kB
dist/assets/docker-602a695a.png                 5.49 kB
dist/assets/nodejs-d83eb6dd.png                 6.60 kB
dist/assets/meta-e386841a.png                   7.75 kB
dist/assets/redux-171787ca.png                  7.77 kB
dist/assets/shopify-c0fdbc80.png                8.00 kB
dist/assets/mongodb-54000b2b.png                8.05 kB
dist/assets/logo-21cdd1c2.svg                   8.87 kB │ gzip:   2.66 kB
dist/assets/github-3b4e1609.png                11.07 kB
dist/assets/starbucks-af2a76fc.png             16.75 kB
dist/assets/creator-dbbffaec.png               21.77 kB
dist/assets/figure_1-5e9e19fc.png              42.75 kB
dist/assets/model-e026b916.png                 58.61 kB
dist/assets/banking-d06acd83.png               87.61 kB
dist/assets/mobile-35b7b780.png               118.14 kB
dist/assets/spam-e6ea50c8.png                 148.54 kB
dist/assets/web-483fa5df.png                  152.26 kB
dist/assets/hmo-5412eaab.png                  265.83 kB
dist/assets/cusine_cluster-6f55795a.png       315.24 kB
dist/assets/comp_phy-f719be01.png             354.25 kB
dist/assets/figure_2-b3f59baa.png             381.39 kB
dist/assets/supermarket_sales-2926486d.png    501.76 kB
dist/assets/jobit-ecb9d39c.png                755.05 kB
dist/assets/carrent-aba013d1.png              758.93 kB
dist/assets/tripguide-892dd3b1.png          3,417.51 kB
dist/assets/index-89bb6ba4.css                 13.85 kB │ gzip:   3.78 kB
dist/assets/index-59747569.js                 490.58 kB │ gzip: 153.19 kB
✓ built in 2.71s

Please pay attention to the this line. ./src/assets/herobg.png referenced in /tmp/portfolio/src/index.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

The image reference to herobg defined in tailwind.config.cjs is transformed into src/index.css by tailwind, thus we should use ./assets/herobg.png to reference the image instead.

After fixing the problem, the herobg is copied to output:

❯ ls dist/assets/ | grep hero
herobg-ecbfddc8.png

BTW, it is better to add dist and node_modules to .gitignore, because they can be generated from npm run build and npm install. Add these large generated folders to your git repo can slow down git operations.

Upvotes: 1

Related Questions