0

Bit of a silly question but I am not sure why this image is not being displayed.

The file structure goes as so in the blogs directory:

    index.php
    img <- this is a folder
    css <- this is a folder

In the img folder, I have the image: computer classroom.jpg

Now in my index.php file I have this code:

<div class="blogs-cover-img" style="background-image: url('./img/computer classroom.jpg');"></div>

And this is the css which is in the css folder:

.blogs-cover-img{
  width: 100%;
  height: auto;
  background-size: cover;
}

The issue is that it does not display the image. When I inspect on the browser it gives me a 404 error, unable to find the image.

I also tried: img/computer classroom.jpg and /img/computer classroom.jpg

BruceyBandit
  • 3,978
  • 19
  • 72
  • 144
  • Could you check if the file ext is in fact `.jpg` and not `.JPG`? – Anurag Srivastava Aug 04 '20 at 17:28
  • it might be the result of an space in the file name. test it. – MajiD Aug 04 '20 at 17:32
  • You might need to escape the space in the filename: `./img/computer%20classroom.jpg`; If that doesn't work, what's the url of the page where you're seeing this? It's going to attempt to resolve it relative to the page url, not the location of index.php. (This might be the same, of course, but I don't know that.) – ray Aug 04 '20 at 17:32
  • Duplicate: [https://stackoverflow.com/questions/4172579/href-syntax-is-it-okay-to-have-space-in-file-name](https://stackoverflow.com/questions/4172579/href-syntax-is-it-okay-to-have-space-in-file-name) – Rob Moll Aug 04 '20 at 17:33
  • @rayhatfield This is the url of the page that should have the image: https://www.metis-online.com/blogs/ – BruceyBandit Aug 04 '20 at 17:37

2 Answers2

0

I am almost sure that it's the problem with the path, because you have SPACE between computer and classroom. Try renaming'computer classroom' file to 'computerClassroom' or smth like that. Let me know if it worked.

jjmm0
  • 1
  • 1
0

This is happening due to having a space in your jpg image file. replace the white space with %20

<div class="blogs-cover-img" style="background-image: url('./img/computer%20classroom.jpg');"
A_Mor1995
  • 1
  • Hey, so I changed it to include a dash but the image doesn't appear to show. But the inspect element doesn't show any errors in the console – BruceyBandit Aug 04 '20 at 17:36
  • This is the url of the page that should have the image: https://www.metis-online.com/blogs/ – BruceyBandit Aug 04 '20 at 17:37
  • just had a look at your code, it's because you've set the background image, yet haven't specified a width or height for the div. Try setting a width and height on the blogs-cover-img div and this should work. – A_Mor1995 Aug 04 '20 at 17:53