React Background Image Issue

Hi all,

I’ve been working on the Random Quote Generator Project for the Front End Libraries Certification and I’m having some trouble setting a background image in any useful way.

I’m using Create React App and when I try to set the background-image property in my .scss file on the body element, root id, or a separate div ( .scss file contained in the same folder as the .js file):

background-image: url('src/images/background.png');

I get the error:

I’ve tried importing the image into my app.js file, but then I’m lost as to an effective way to set it as the background image. I’m still pretty new to using react, so I’m not sure if I’m just missing something setup wise or if anyone has any other advice?

Thanks!

Do you have a link to your project. Hard to tell what the url should be without seeing the file structure.

-4trio19 :pineapple:

I do, here’s the link to the repo:

Because everything else is running without the image, I made a separate background-image branch that includes the file.

So, you’re file structure looks wonky to me unless I’m missing something. It seems like they’re an extra level in the directories that contains all of the App-test stuff. It should basically be APP > SRC > Files. That being said you do not have the relative url set up correctly so you’ll need to fix that as well. Here’s some help with relative links: https://css-tricks.com/quick-reminder-about-file-paths/

I would definitely consider fixing up the file structure before doing too much more work here though.

Shouldn’t it be '../images/background.png'

The file structure has definitely been a part of my learning curve! I started with the tree that CRA generates, and built from there. In my research I came across an article describing how to organize your file structure based on the feature, but given the size of the app I went a bit overboard/obscure. The styles folder was also an attempt to create a shared location that could be used by other components added later.

The issue was definitely with my relative path I was using- I switched to

../images/background.png

the image worked perfectly. Thanks for the help and advice!

1 Like

You got it! Glad you got things working :smile:

-4trio19 :pineapple: