CSS background-image: url() wont access folder

Question

my file structure has 'my site' then 3 html pages, a CSS folder and an images folder. When using the background-image tag in CSS how do I access the images in the folder? i tried background-image: url(images/positive.png, but this did not work.]

Thanks

it is relative to your css file. – Daniel A. White Jan 12 '19 at 19:45 — Daniel A. White, Jan 12 '19 at 19:45
@DanielA.White what does that mean? – Oli Knight Jan 12 '19 at 19:45 — Oli Knight, Jan 12 '19 at 19:45
meaning you have to go up a directory then over. – Daniel A. White Jan 12 '19 at 19:46 — Daniel A. White, Jan 12 '19 at 19:46
https://stackoverflow.com/a/2718538/5385381 – ksav Jan 12 '19 at 19:46 — ksav, Jan 12 '19 at 19:46
@DanielA.White how would i do this? – Oli Knight Jan 12 '19 at 19:46 — Oli Knight, Jan 12 '19 at 19:46

score 2 · Answer 1 · 2019-01-25T01:21:28.143

The background image is getting fetched from the CSS file. Which means: If your CSS file is located in /Home/style.css and that your background is located at /Home/bg.png, you must specify the following:

background-image url("bg.png");

or:

background-image url("/Home/bg.png");

If the file is located at /bg.png and that your only a folder deep (for example, if your stylesheet is located at /Home/style.css), you can tell the stylesheet to climb up a folder, and then fetch the background, like so:

background-image url("../bg.png");

Hope this helps.

score 1 · Accepted Answer · answered Jan 12 '19 at 19:54

Give this is a try...

background-image: url("../images/your-image-name-here.png");

The "../" basically tells the code that it needs to come out of the CSS folder first, then go into the images folder. Without this step, it is looking for an images folder within the CSS folder.

score 0 · Answer 3 · answered Jan 12 '19 at 19:58

0

Try this

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

answered Jan 12 '19 at 19:58

ellipsis

12,049
2
17
33

CSS background-image: url() wont access folder

3 Answers3