CODEWITHSUNDEEP
javacssjavafx
Ignitz
Ignitz

Reputation: 19

Changing background image with Button press Javafx

I want to change the background image from a scene.

This is from the css file.

.SettingsGrid {
    -fx-background-image: url('Background.quiz.jpg');
    /*-fx-background: #ffffff;*/
    -fx-background-size: cover;
}

I tried using this:

SettingsGrid.setStyle("-fx-background-image: url('Background2.quiz.jpg')");

But instead of the background changing to the new image, it just went white.

Just changing the background colour works.

Upvotes: 1

Views: 96

Answers (1)

jewelsea
jewelsea

Reputation: 159291

Try specifying the fully qualified path relative to the root of the classpath.

The resolution path is different depending on whether you access a CSS URL resource from a style sheet or an inline style.

Read the uri documentation in the CSS reference. It is well-written, with clear examples that will help you understand your issue. Quoting from the documentation for CSS URL resolution:

  1. If the address does not have a scheme: component, the address is considered to be the path component only.
  2. A leading / character indicates that the path is relative to the root of the classpath.
  3. If the style appears in a stylesheet and has no leading / character, the path is relative to the base URI of the stylesheet.
  4. If the style appears in an inline style, the path is relative to the root of the classpath (regardless of whether or not there is a leading /).

Example

-fx-background-image: url('Background.quiz.jpg');

When written inside a CSS stylesheet, this will look for an image location in the classpath adjacent to the stylesheet.

When written in an inline style, it will look for an image location in the root of the classpath.

Instead, for the inline style URL, if you specify the full path to the image relative to the root of the classpath, then the image will be found.

If you package your app as a jar, then run jar tvf on the packaged jar, and your image is located, for instance, in the location image/Background2.quiz.jpg, then the URL to use in an inline style would be:

settingsGrid.setStyle("-fx-background-image: url('image/Background2.quiz.jpg')");

Upvotes: 2

Related Questions