css - Set background image the same size as the window/screen in Java app

Question

I would like to set a background image the same size as my window/screen.

I would prefer to do this in my CSS file, but I have NOT FOUND a way to accomplish this.

Must I do this in a javafx class file?

Thanks for every help ;)

Answer 1

You will have to determine the screen size in java code as demonstrated in JavaFX window sizing, there is no way to determine it in CSS.

For an Image, in your java code you can use something as

ImageView imageView = new ImageView(image);
imageView.setFitWidth(Screen.getPrimary().getVisualBounds().getWidth());
imageView.setFitHeight(Screen.getPrimary().getVisualBounds().getHeight());

If you want to set the background image to a scene then:

import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.*;

public class ScreenSizeImage extends Application {
    @Override public void start(final Stage stage) {
        // uncomment if you want the stage full screen.
        //stage.setFullScreen(true);

        Screen screen = Screen.getPrimary();
        Rectangle2D bounds = screen.getVisualBounds();

        stage.setX(bounds.getMinX());
        stage.setY(bounds.getMinY());
        stage.setWidth(bounds.getWidth());
        stage.setHeight(bounds.getHeight());

        StackPane root = new StackPane();
        root.setStyle(
            "-fx-background-image: url(" +
                "'http://icons.iconarchive.com/icons/iconka/meow/256/cat-box-icon.png'" +
            "); " +
            "-fx-background-size: cover;"
        );
        stage.setScene(new Scene(root));
        stage.show();
    }

    public static void main(String[] args) { launch(args); }
}

Of course, rather than the inline setStyle call you are best off using a separate CSS stylesheet like below:

.root{
    -fx-background-image: url("background_image.jpg");
    -fx-background-size: cover;
}