CSS Background-Image Not Working

HTML-CSS
1

Hey FCC !

I’m currently working on the “Design a Product Landing Page” challenge. I decided to work it on in my computer using VSC instead of CodePen. The website layout uses CSS grid. I’m trying to fill two of the “containers” using the background-img property, so far no luck.

Can anyone help me figure this out?

    background-image: url('...\images\product-img1.jpg');
  }

 #lower-right-container{
      background-image: url("C:\Users\G\Desktop\flex-one\assets\images\product-img2.jpg");
  }

I tried both ways thinking the path was wrong, but neither of them display the images.

2

Hi,

I would suggest you to use relative paths because if you are working with another person on a project, the chance that he/she will have the same folder structure as you is too little.

In the example code I think there shouldn’t be 3 dots but only 2 and use / instead of \. Did you try:

background-image: url('../images/product-img1.jpg');

This should work if you have the following folder structure in your project:

current directory
  - some other directory
    * index.html
  - images
    * product-img1.jpg

I hope this will help. : )

1 Like
3

seems that you are using \ when you should be using /

background: url(img/gatillazo-vina-rock-2018b.png);

in my case the folder is named img rather than images
if you are going to put it up on codepen you will need to host your images. If you have a google account you can upload to your google photos right click on the image to copy the url and paste that into codepen

1 Like
4

Thanks! Issue solved!

5