CSS: image url doesn't work

Question

Here is my folders structure:

- var/www/project
  - public
    - images
      - image1.png
    - style.css
  - storage
    - other_images
      - image2.png

I'm trying to access the picture with background-image: url("../storage/other_images/image2.png");

However the image is not displayed. But if I try to access another image like this: background-image: url("/images/image1.png"); it works.

And if I try background-image: url("../public/images/image1.png"); it fails again. Which should work as I'm basically providing the same url.

Another weird thing is that background-image: url("../images/image1.png"); also works (should it?). I can even write background-image: url("../../../../../../../images/image1.png"); and it still finds it.

Is this how it is supposed to be?

The main question is: how do I properly specify url for the image2.png?

Justinas · Accepted Answer · 2015-12-02 12:35:16Z

1

Your public and storage is in same level and storage becomes not accessible via URL, because it's not under web root.

Also ../somedir/image.png will be interpreted from current directory. Better always specify /somedir/image.png (with first character / as it specifies root directory).

answered Dec 2, 2015 at 12:35

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Linas Over a year ago

I remember url being relative to css file's location. So the solution is to move image2.png inside images/ ?

Justinas Over a year ago

@Linas If your URL is not in CSS, but in image tag, than it may change. And yes, move all images to web accessible location

Collectives™ on Stack Overflow

CSS: image url doesn't work

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related