set background css image in phpstorm - "cannot resolve file"

Question

I have an image that I'd like to set as a background in a Laravel 3 project - background-image: url("public/img/find-a-table.png");

But it's saying "cannot resolve find-a-table.png" in phpStorm even though I definitely have the image file added to that directory.

Do I need to change something to have it find my image in that directory? In any other typical web app, this would be quite trivial to do so I don't know if I'm missing something.

---

this site shows I don't need the quotes around the path? I've tried that too but that doesn't fix it. They use:

background: url(images/bg.jpg) no-repeat center center fixed; without quotes

Answer 1

phpStorm does not tell you, that your browser will not see the given file. It just tells that phpStorm itself does not see the file.

You have to tell phpStorm where the relative path(es) start(s).

To do so, open your project file structure (cmd + 1 on Mac), right click on your (public accessible) root directory (public), then Mark Directory as > and Resource Root. After couple of seconds the error message should disappear.

Answer 2

Keep in mind that image path should be relative to your css, or absolute if it starts with /.

Try this background-image: url("/img/find-a-table.png"); Or this background-image: url("../img/find-a-table.png"); if your css folder is alongside img

You probably don't need public/ in your url. And don't rely on phpstorm with this, test it in browser.

Answer 3

Here is the fix:

1- Right-click on your (public accessible root directory) where you're sourcing the images from.

2- Scroll down to Mark Directory as

3- Choose Resource Root

Answer 4

Had this same error in my WebStorm IDE which was resolved by adding "../" before the path. try this:

background-image: url("../img/find-a-table.png");

Answer 5

I had this problem too. My resolution was to write:

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