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) }
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.