Background missing

[CodeArtisanRiz]

The hero section background is not showing.

[sebastiandine]

Having the same issue. How is the hero section background created? It is not really mentioned in the tutorial.

[sebastiandine]

Having the same issue. How is the hero section background created? It is not really mentioned in the tutorial.

I managed the solve this as follows: The background is defined via Tailwind theme extension in tailwind.config.js. There the location to the bg image is defined via propery backgroundImage. There, the path to the actual image is defined via url(). What I found out is, that url() seems to refer to the public/ directory of the project when the url starts from "root" (e.g. url(/herobg.png) refers to public/herobg.png). If you want to refer an image from another directory other than public/, you need to "step out" of the public directory first (e.g. url(../assets/herobg.png) refers to assets/herobg.png). I am unsure why url('/src/assets/herobg.png') works in this project. Maybe it is because it is using a src/ directory in the React project.

[mperr11]

I have the same issue. I tied to change it on tailwind.config.js. How you did, but it doesn't work for me.

[kalyansaxena]

I believe -> /src/assets/herobg.png ( this is referring to the absolute path from the project root folder ) -> Whenever you start your path with ./ for example -> ./desktop_pc/scene.gltf -> it's relative to the public folder i.e public/desktop_pc/scene.gltf

[Chishikii]

Also make sure your Navbar and Hero components are actually in the correct div in App.jsx as that's where the background gets set.

[artias13]

The hero section background is not showing.

One of the possible reasons is that you decided to use webpack or something else besides Vite. That was my case and when I switched to Vite it all worked just fine xD

[cxfajar]

Add this background image styling in index.css

.bg-image {
  background-image: url("/src/assets/herobg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

Then , on line 6 of your code, update this element's class in App.jsx <div className="relative z-0 bg-image">