-2

Beginner, learning basics in HTML/CSS I have an issue with the background image. When i code it with outside link like this it is working:

 background-image: url(https://furniturefusion.co.uk/wp-content/uploads/2018/07/inspiration-banner1-2.jpg);

When i do it with a downloaded picture (same picture), the image is not showing in a browser. 

background-image: url(/images/cover.jpg);

I assume all other (height, weight) is good, since it is working with http.... And image is in the same folder where is index page and style folder.

Where is the problem?

Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
Zlaja
  • 5
  • your url for internal resources is looking for a folder named images. Remove it to access the image – Lelio Faieta Nov 12 '19 at 09:51
  • Please check the console for image is not loading error. The syntax is right , the only issue could be the path of the image or spelling. – Neha Sharma Nov 12 '19 at 09:56

2 Answers2

2

If your image is in the same folder as index and css then the url should be:

background-image: url("cover.jpg");

Using 

background-image: url("/images/cover.jpg");

you are referring to an image that is in a subfolder named images (that you don't have) Obviously I assume that the missing quotes are just a typo

Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
1

it will likely be because your path is now incorrect. If you open up the chrome developer tools (F12 on keyboard) go to network, then refresh the page. You should see the image in there in red. You need to adjust the path so it is correct.

the start of the URL matters. Starting with a '/' will start from the website root. '.' will do current directory and '..' will go up a directory.

so if your path is:

www.example.com/images/test/cover.jpg

and you start in: 

www.example.com/css/

doing /images/test/cover.jpg would be www.example.com/images/test/cover.jpg as then starting '/' makes it start from the root.

doing images/test/cover.jpg would be www.example.com/css/images/test/cover.jpg as this doesnt start with a '/'.

you could do: ../images/test/cover.jpg as this would then be www.example.com/images/test/cover.jpg

Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
Piercy
  • 809
  • 1
  • 11
  • 33