I need help getting a background image to work in my build/deployment: React, Vite, Tailwind.css

[jesseBlank]

Select Topic Area

General

Body

Hello,

My background image is not displaying on my deployed site. However, it is working on my local host. I have seen posts like this that have similar issues but none of those solutions are working for me.

I have noticed the image is not being being moved to my dist folder. When I manually move it and attempt to deploy, it is automatically removed from the dist folder.

this is my css code:
.bg-image {
background-image: URL(src/assets/desertSky.jpeg);
}

my repo: https://github.com/jesseBlank/portfolio
my site: https://jesseblank.github.io/portfolio/

Any help would be huge!

Thanks.

[LiteBrite82]

Hi @jesseBlank

I forked your repo and messed around with your code a bit. I dont have a solution for you yet - I'm not familiar with tailwind. Im not sure how to mix custom CSS with Tailwind - I use Material UI.

I can tell you its not a pages issue; it is a coding and build issue (configuration of tailwind, import in index.html, file naming, file referencing).

To start, take a look at your configuration for tailwind compared to the documentation. It looks like you may have some adjusting to do.

Then, hopefully, someone in the community can help with the file reference issues. I feel like its something super simple; buried in documentation.

I'm going to move this over to Programming Help for more focused visibility.

[LiteBrite82]

Also, consider editing the discussion title to include tailwind.css and Vite. Ex: "I need help getting a background image to work in my build/deployment: React, Vite, Tailwind.css"

[jesseBlank]

Okay. Thank you for your help.

[LiteBrite82]

I found a good YouTube walkthrough by @pixegami that covers a good way to do it in great detail - skip to 26:30

Thanks @pixegami !

[jesseBlank]

Perfect. That's it! Thank you so much for your help!

[LiteBrite82]

That looks Awesome!