CSS image.png's not loading on google drive

Question

I am trying to get my css file using background: url(); to use the correct path to display my images on my index.html, this webpage is a 1 page index.html which just displays static content and some images, nothing fancy, I currently have it on google drive being hosted perfectly fine.

It's just the image paths are not working when they are set to relative which would be "img/example.png" and they don't work with the link you get from setting the images to public so they can be viewed by anyone which for example would be " https://drive.google.com/file/d/IMAGE_CODE/view?usp=sharing "

How have you managed to get your images to load on drive using CSS background: url();?

I don't want a direct sort of link so every time my website refreshes it has to re download the images, that creates very slow refresh page loading, I want it to look for them just like a relative path with much faster loading.

Answer 1

You may have an issue with your path being in the wrong directory, so you would use

../

to move up a directory until the correct one is reached. For example, if your css file is located in a folder structure such as "root/assets/stylesheets/style.css" and your image is at "root/img/image.png" then within your css file, you would have to use the following code

background-image: url('../../img/image.png');

to move up two directories to properly call your image.