Home » Php » set background css image in phpstorm – “cannot resolve file”

set background css image in phpstorm – “cannot resolve file”

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

Answers:

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 Mark as Sources Root. After couple of seconds the error message should disappear.

Questions:
Answers:

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.

Questions:
Answers:

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");

Questions:
Answers:

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

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *