Ravenous Part 1 - Background Image not loading

Get Help
#1

Hi All,

I’ve just finished Ravenous Part 1

and I’m unable to load the background image. Initially I switched the file to a JPG which solved the issue for some on this forum but that didn’t fix it. Then I switched it to linking to the URL (for debugging I’m using the same URL as we use for the Business component which does work for me). I’m able to change the background color of my .SearchBar component, but cannot get the image to load. I’ve posted both my CSS and js code below for the SearchBar. If anyone has any ideas here, please let me know!

Screen Shot 2020-12-20 at 8.58.04 AM
Screen Shot 2020-12-20 at 8.58.04 AM1348×322 38.3 KB
Screen Shot 2020-12-20 at 8.58.40 AM
Screen Shot 2020-12-20 at 8.58.40 AM992×1376 108 KB

#2

Hello, and welcome to the forum!

You shouldn’t need to change the CSS as long as you put the images it tells you to download in the same folder as your SearchBar.css and SearchBar.js files without changing their names.

However, you might not have the files it is looking for because you’re trying to use the pizza image, which was for the business listings, not the SearchBar. In Step 27 of the project, it gives 2 links for images that are already named the way the CSS is looking for them. As long as you save them in the same directory with the same names that they already are, you should be alright.

Here is what mine looks like:
image

#3

thanks a lot for the help! I actually just found the small bug (there was a space between url and the filepath.