Why isn't absolute path for url() function working?

Question

I'm trying to display an image on the background of a site through CSS. I want the image to be kept in a separate folder than the CSS/HTML file. The image only displays, if I place it in the same folder as the CSS/HTML file, and reference its name only.

The code is in C:\Users\User\Desktop\project\templates and the image is in C:\Users\User\Desktop\project\pictures. If I try using the absolute path it won't display. It will only display if I place the picture in the templates folder.

<!--This code works if I place the picture in the template file-->

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("picture.png");
}
</style>
</head>
</html>

<!--This code doesn't work-->

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("C:\Users\User\Desktop\project\pictures\picture.png");
}
</style>
</head>
</html>

Try to add the file:/// prefix before the url according to the answers here: https://stackoverflow.com/questions/14519388/can-i-use-an-image-from-my-local-file-system-as-background-in-html — Ponpon32, Oct 20 '19 at 18:51
Also try relative path url("../pictures/picture.png") and see if it works. — Swaroop Deval, Oct 20 '19 at 18:56
Thanks @YochaiAkoka, the file:/// prefix worked for absolute references — Alec McKay, Oct 20 '19 at 19:22

score 0 · Accepted Answer · answered Oct 20 '19 at 18:53

0

Use this css

Body{

background-image: url("../pictures/picture.png")
}

answered Oct 20 '19 at 18:53

PRADEEP GORULE

159
1
11

Dominic Unimog Atsu · Answer 2 · 2019-10-20T19:42:25.833

Based on your folder structure, you might need to do a ../pictures/picture.png

background-image: url("../pcitures/picture.png");

To find the image when it's in the pictures folder. The first '.' means the current directory(.css file), while the second '../' means the parent directory (projects folder). From there, you navigate to pictures folder and then directly link with the picture image. Use this link to learn about file paths. https://en.wikipedia.org/wiki/Path_(computing)

Avoid absolute file path. Imagine transferring your files to a new server, you'll have to rewrite the file path again.

 background-image: url("C:\Users\User\Desktop\project\pictures\picture.png");

Why isn't absolute path for url() function working?

2 Answers2