Search code examples
javajavafxscenebuilder

JavaFX: Can not set -fx-background-image from SceneBuilder

Could someone explain why I can't load image from field -fx-background-image inside SceneBuilder?

Images for reference:

I've found out that I can do that from a .css file, for example:

#base {
  -fx-background-image: url("background.jpg");
  -fx-background-size: 100% 100%;
  -fx-background-position: center center;
}

But that doesn't update from inside SceneBuilder, while I would like it too.

Solution

  • You need to attach the style sheet to the fxml element for it to be applied to the FXML viewed in the SceneBuilder design view.

    There is a stylesheet field in the SceneBuilder property sheet view (it is actually in the image from your question). Select the root element and click the + symbol to select the CSS style sheet to apply. The style sheet will be applied to the root and all child elements.

    Or you can use Preview | Scene Style Sheets | Add Style Sheet... to apply style sheets when you use the preview view.

    You don't need to (and probably should not) set the style attribute in Scene Builder if you have a CSS file. The styles will be applied from the CSS files according to their selectors. Instead sets ids and style classes in scene builder and attach the stylesheet.

    Your id is base, so if the id of the node is set to base, the selector will find it. I prefer working with style classes rather than ids but ids will work too.

    You are referencing the image directly by name without relative path usage. So, as long as the image is in the same location as the fxml file and the style sheet is correctly applied as outlined above, the image defined in CSS should display in SceneBuilder.

    I think that SceneBuilder automatically monitors the file system for changes, so if you change the FXML or CSS file externally, it will automatically reload them (notifying you of some, but not all, errors that may occur on reload).

    If things still aren't working, see the Eden guide on where to put resources in JavaFX apps and try following their recommended approach (you might already be doing that, so locating the image might not be your issue).