JavaFX css, loaded from a fxml file, doesn't seem to be loading an image

60 Views Asked by At

So, I am making a project where I need to add a background image to an anchor panel, and I am trying to be clean and use a separate css.

So far my project structure looks like this:

D:.
├───.idea
│   └───libraries
├───.mvn
│   └───wrapper
├───src
│   └───main
│       ├───java
│       │   └───name
│       │       └───memoryname
│       └───resources
│           └───name
│               └───memoryname
│                   └───css
│                       └───img
└───target
    ├───classes
    │   └───name
    │       └───memoryname
    │           ├───css
    │           └───img
    └───generated-sources
        └───annotations

What interests us, in theory, is this part:

memoryname
└───css
    └───img

Here, in the memoryname folder, I have my fxml. In the css my css and in img my image. I have told my css file to do this:

.anchor {
    -fx-background-image: url('./img/Sfondo.png');
    -fx-background-size: 100% 100%;
}

Within the fxml, I have called the css file using <stylesheets> <URL value="@css/application.css" /></stylesheets>.

The problem is, even if it doesn't give me any errors or notices, the image does not show up. If more info is needed I will gladly answer

Edit: after cleaning and recompiling maven, the output is this:

D:.
├───.idea
│   └───libraries
├───.mvn
│   └───wrapper
├───src
│   └───main
│       ├───java
│       │   └───name
│       │       └───memoryname
│       └───resources
│           └───gigliotti
│               └───memoryname
│                   └───css
│                       └───img
└───target
    ├───classes
    │   └───name
    │       └───memoryname
    │           └───css
    │               └───img
    ├───generated-sources
    │   └───annotations
    └───maven-status
        └───maven-compiler-plugin
            └───compile
                └───default-compile

Edit 2: Minimum Reproduciple example. Steps:

  1. Create a new JavaFX project with IntelliJ. Include the first two libraries ( BootstrapFX and ControlsFX );
  2. You now will have example files. Go to the example fxml file, and with the built-in editor add a new anchorPane, set it's id to 'anchor' and in the Stylesheets text box, write 'style.css';
  3. Within the same folder that the fxml file is in, add your image and a CSS file called 'style.css';
  4. In the file, add:
.anchor {
    -fx-background-image: url('/YOURIMAGENAME.png');
    -fx-background-size: 100% 100%;
}
  1. Run your project.
0

There are 0 best solutions below