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:
- Create a new JavaFX project with IntelliJ. Include the first two libraries ( BootstrapFX and ControlsFX );
- 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';
- Within the same folder that the fxml file is in, add your image and a CSS file called 'style.css';
- In the file, add:
.anchor {
-fx-background-image: url('/YOURIMAGENAME.png');
-fx-background-size: 100% 100%;
}
- Run your project.