How to refer to image resources in javaFX css file to ensure that they are copied into the correct output directory?

Hi all,

I am currently writing a JavaFX application and am having trouble correctly configuring the resources. My project, "Project", has a source structure as follows:


Here the resources directory is marked as a resource directory, while the java directory is marked as the sources directory.

I have a .css file in src/main/java/rootPackageName/view/styling.css . This file refers to some images in the resources directory. Using IDEA's autocomplete suggests the path "../../../resources/button.png" for the image file, giving a css entry as below.

.button {
    -fx-graphic: url("../../../resources/button.png");

While this is technically correct, refering to the image file using a relative path like this does not seem to work properly in IDEA. The image files are copied from resources into out/production/*.png , but java looks for the resources in


I believe this is because the path is relative, so from /out/production/rootPackageName/view/ it refers to out/ where it needs to refer to out/production/rootPackageName/resources.

I can avoid this problem if I refer to the images absolutely, e.g.:

-fx-graphic: url("file:/C:/Users/username/IdeaProjects/Project/src/main/resources/button.png");

However this has multiple drawback as first, I cannot use IDEA autocomplete to fill in these suggestions, not to mention that intelliJ gives "cannot resolve directory" error when using this format. The program compiles and runs fine, but it is hugely annoying. There must be a simple solution to this, but I am really at a loss here.

So, some questions arise:

1) Why does IDEA copy the files from src/main/resources/ into /out/ and not out/production/resources/ ?
2) How can I refer to my image using a directory structure relative to the root of the project, and not relative to the css source file?
3) Alternative, how can I prevent IDEA from giving me so many errors when refering to the absolute path.

Many thanks.

Comment actions Permalink

In my opinion, the autocomplete suggestion is wrong or misleading.  You shouldn't have "resources" anywhere in the relative path.  The path should probably be "../../button.png".  Does the autocomplete suggest anything from the "resources" folder once you have "../../"?

Personally I declare "src/main/java" as a resources folder in my JavaFX projects.  Other tooling like Scene Builder doesn't work well with the split sources / resourses concept either and, to me, the simplest approach was to put everything together.

Somewhat related, the way paths are resolved in CSS is going to be improved to allow absolute (classpath) URLs in 8u40.  See for a better explanation.

Comment actions Permalink

I'm sorry for long answer.

You're right, autocomplete suggestion is wrong. Thanks for the link, I think we should provide completion according to upcoming changes. You can subscribe on issue update here:

Comment actions Permalink

For anyone reading this, I found an acceptable solution. One can place the resources into a resources directory whose package structure matches the java code package structure. So instead of placing the resources into src/main/resources I instead put them into src/main/resources/rootPackageName/ . This has two advantages. First, the resources are copied into the correct directory so that they load correctly at runtime. In addition, this is a "Maven-friendly" solution, meaning that when I build my project with Maven it knows where to find the resources. Additionally, one can still refer to the resources in the css file using relative paths as discussed, so everything works out.


Please sign in to leave a comment.