Is my path to image is correct ? cuz image won't display on the website

Hi!
this is my path to my CSS : C:\Users\hajar\Desktop
this is my path to my image: C:\Users\hajar\Desktop\

Find below my code:
.index-banner {
width: 100%;
height: 100vh;
background-image: url(‘coverpage.jpg’);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: table;


I checked the image’s name, everything looks fine but still the image won’t display
Could you please help?

Thank you.

Hey @Hajarbadass,

I can’t help you much because I can’t really see it visually, but have you tried using ./ before the actual path to your image. So: ./image.jpg

1 Like

Thank you for your swift reply,
I did tried it and didn’t work :confused:
you mentioned that you can’t help much because you can’t see it visually, could you please let me know how to ? as I am coding using VS (text editor )

Hey! The image should be in the same folder as your html file. So create a folder and put everything in it. VS has some cool features: when you write “url(”") and then “./” inside it shows you the files in this folder so you can just choose which one you want. Also you can check if html sees your image, just hold “Ctrl” and click on the path that you wrote in url and VS will open your image.

1 Like

thank you !
I have already tried VS trick with clicking the link and it doesn’t work
Also when I put my html and css style in a folder , they don’t work. This is why my code and images are placed in desktop directly and they work like this. Could this is be perhaps the problem of why my image is not displayed ?

Maybe you have some syntax mistakes… Your project files should be always in its own folder. For example folder “test01”, files inside are: “index.html”, “css.css”. Your main html page should always have the name “index”. This folder can be on the desktop.
Put everything in the folder and make screenshot of the files inside pls. Then provide the code of html and css. Unfortunately, now I’m going to bed, so I will respond in ~16 hours.

1 Like

First of all thank you for taking the time to respond and help me. really appreciated.
i did as you recommended and the code work fine even after I placed it inside a folder “test01”, my image is in the same folder but still it won’t display on the website.
I have noticed that when I click on the image link in VS , it won’t open instead I get this message : " an error occurred while loading the image"

Below screenshot of test01 :
test01

I would like to share my code but don’t know how:/
Edit 1: here’s the current path of my image :

background-image: url(‘coverpage.jpg’);

Have a great day!

You can use github, very useful thing. You can upload all these files there and give me a link.

1 Like

for some reason I couldn’t install github in my desktop
I have used codeshare to share my css code , here’s a link
the first part of the code is a CSS reset that I have included in my code
https://codeshare.io/5Ox3Dj

No need to install github, just go to github.com, sign up, create repository, upload files and provide me a link.

1 Like

Thank you for your patience! here’s the link : https://github.com/hajarbadass/website

I figured it out! so I have named my image : coverpage.jpg however I have noticed when I opened my image the name appeared as coverpage.jpg.jpg, so I renamed as so and it worked :slight_smile: thank you for your help

you can have file extensions show, you just need to change your preferences for file visualisation, in that way you will not have these issues anymore