JavaFX display scene background image

Question

I’m developing a JavaFX application on Eclipse Kepler using the built-in FX library from Java SDK1.7.0_45. I want to display a background image in a scene. Following the tutorial provided in the Java documentation, following code should work:

public class Main extends Application {
    public static void main(String[] args) {
    Application.launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
    GridPane grid = new GridPane();
    Scene scene = new Scene(grid, 300, 275);
    primaryStage.setScene(scene);
    scene.getStylesheets().add(Main.class.getResource("Login.css").toExternalForm());
    primaryStage.show();
    }

}

My CSV file looks like this:

.root {
 -fx-background-image: url("background.jpg");

}

But I just get a blank screen instead. I have 3 files in the src/application folder: background.jpg, Main.java and Login.css.

I have tried adding a backslash, putting the image into a separate folder, providing an absolute path, providing several types of images, using ../application/background.jpg, changing the code to file:background.jpg, providing the URL directly into the code and dismissing the CSS file, using an imageview instead, ..... but nothing works.

I've taken a look at several other stackoverflow links, all seemed to fail:

JavaFX How to set scene background image (renders a blank screen)
Setting background image by javafx code (not css) exception)
Cannot load image in JavaFX
and many more.

The strange thing is, when I supply an image from a server as a hyperlink, everything works fine. Supplying the path to a local file never works though. What am I doing wrong? Can somebody show me how to display a local image? Is this a bug?

With the image you said works from a hyperlink, is it also a .jpg file? — WillBD
.jpg, .png, .gif, all common image formats are displayed correctly when supplied as a hyperlink. I just don't want the computer to rely on an internet connection just to show a background... — Jen V

WillBD WillBD · Accepted Answer · 2013-12-20T22:29:00

This worked fine for me with a .png, the only noticeable difference I had as opposed to you, was that I split up the .css file, and my background.png into a sub-package of the main one. Example:

my directory structure looks as follows:

sotestproject ----|
                  |
                  |---package sotestProject ---SOTestProject.java
                                    |
                                    |
                                    |
                                    |
                               package sotestProject.style
                                           |
                                           |---Login.css
                                           |
                                           |---background.png

using this breakdown, the following files with code successfully produced a background with an image:

SoTestProject.java:

package sotestproject;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

/**
 *
 * @author William
 */
public class SOTestProject extends Application {

    @Override
    public void start(Stage primaryStage) {
            GridPane grid = new GridPane();
            Scene scene = new Scene(grid, 300, 275);
            primaryStage.setScene(scene);
            scene.getStylesheets().add(SOTestProject.class.getResource("style/Login.css").toExternalForm());
            primaryStage.show();
    }

    /**
     * The main() method is ignored in correctly deployed JavaFX application.
     * main() serves only as fallback in case the application can not be
     * launched through deployment artifacts, e.g., in IDEs with limited FX
     * support. NetBeans ignores main().
     *
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Login.css:

.root {
    -fx-background-image: url("background.png");
}

And then obviously my background.png is in the same directory as the .css file. The main 'change' in code is to note that with the scene.getStyleSheet() I used a reference to style/ instead of just the resource.

I hope this helps!

One thing to note: I'm compiling against the 32-bit jdk 7.0_45. That shouldn't make any difference, but there it is.

JavaFX display scene background image

4 Answers