1

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.
Gabe Lily
  • 11
  • 3
  • Did you manually create that file tree, or did you use a tool (e.g., `tree`)? Because it's a little odd. The source directories (under `src`) have `img` as a _child_ of `css`. But the build output (under `target`) have `img` as a _sibling_ of `css`. Which is correct? – Slaw Jul 22 '23 at 21:06
  • Hi slaw. Yes it was made using tree, I am not sure about why they're put like that, but it might be because that was the disposition at one point when I ran it, So maybe it hadn't updated yet? I have tried running it again and there is still no image in the background, though. – Gabe Lily Jul 22 '23 at 21:11
  • Note that I have no idea how to reply to messages on StackOverflow. I am hoping I am doing this right. – Gabe Lily Jul 22 '23 at 21:11
  • Can you try cleaning and rebuilding your project (e.g., `mvn clean` → `mvn compile`)? Then look at the output of `tree` again. Does it still look odd? Also, double-check that the PNG file is ending up in the build output. – Slaw Jul 22 '23 at 21:23
  • ok, done that . – Gabe Lily Jul 22 '23 at 21:31
  • And running the project still results in the image not appearing? – Slaw Jul 22 '23 at 21:32
  • Unfortunately it still does not appear – Gabe Lily Jul 22 '23 at 21:42
  • 1
    I just tried a similar setup, and everything worked correctly. Can you please [edit] your question to provide a [mre]? Perhaps there's an issue with a part of the code you aren't showing us (e.g., you don't have a node with the styleclass `anchor`, or that node is being covered by other nodes, or that node has no size, etc.). – Slaw Jul 22 '23 at 21:43
  • Done. Check if it works now – Gabe Lily Jul 22 '23 at 21:58
  • "_set it's id to 'anchor'_" -- If you've set the **ID** to `anchor`, then in the CSS you need to use `#anchor`, not `.anchor`. – Slaw Jul 22 '23 at 22:01
  • when I do that, it still doesn't make the image show up. – Gabe Lily Jul 22 '23 at 22:02
  • I cannot seem to reproduce the problem after following those steps. The background image is applied as expected. – Slaw Jul 22 '23 at 22:48
  • 1
    Though I used `./image.png`, not `/image.png`. – Slaw Jul 22 '23 at 23:27
  • 1
    Eden has a [guide on loading resources in css](https://edencoding.com/where-to-put-resource-files-in-javafx/#loading-a-resource-in-css), in case that may help. – jewelsea Jul 23 '23 at 03:01
  • Can you please tell where is your fxml file, css file and the image are located in tree the you provided. – Sai Dandem Jul 24 '23 at 04:07

0 Answers0