how to fit the background size into the window siz

Question

I tried to make the background size as the window size. but, It's quite picky. I didn't use the css file format.

it's the part of main to implement the window.

public void start(Stage primaryStage) throws Exception {
    GameLoopManager loop = GameLoopManager.instance();
    Controller controller = new Controller(loop, primaryStage);
    loop.start(new MenuState());
    primaryStage.show();

    primaryStage.setFullScreen(true);


}

and this is the parts of body to implement the background and stage.

private UISubScene optionSubScene;
private UISubScene helpSubScene;
private UISubScene creditsSubScene;
private UISubScene buttonChooserScene;

private UISubScene sceneToHide;

List<UIButton> menuButtons;

List<ButtonPicker> buttonsList;

private BUTTON chosenButton;

public MenuViewManager(Stage mainStage) {
    sound.backgroundMusic();
    menuButtons = new ArrayList<>();
    mainPane = new AnchorPane();
    mainScene = new Scene(mainPane);
    mainScene.setFill(null);
    mainStage.setScene(mainScene);

    super.mainStage = mainStage;

    createSubScenes();
    createButtons();
    createBackground();
    createLogo();

    super.mainStage.setOnCloseRequest(new EventHandler<WindowEvent>() {
        public void handle(WindowEvent we) {
            controller.stop();
        }
    });
    // mainStage.show();

}

private void createBackground() {
    Image backgroundImgae = new Image("main/resources/images/jxoPOUxa.gif",true);
    BackgroundImage background = new BackgroundImage(backgroundImgae, BackgroundRepeat.NO_REPEAT,
            BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT);        
    mainPane.setBackground(new Background(background));


}

I tired to use BackgroundSize.AUTO but, I can't. what should I do to get the solution?

If, I can use the css format how to use that? but I can't rewrite and revise lots of codes because, mine is almost done and I'm integrating and debugging.

Answer 1

If you want to stretch the image to fill the entire Region you should use:

// Side note: Are you sure having "main/resources" in the path is correct?
var image = new Image("main/resources/images/jxoPOUxa.gif", true);
var bgImage = new BackgroundImage(
        image,
        BackgroundRepeat.NO_REPEAT,
        BackgroundRepeat.NO_REPEAT,
        BackgroundPosition.DEFAULT,
        new BackgroundSize(1.0, 1.0, true, true, false, false)
);
mainPain.setBackground(new Background(bgImage));

The two true arguments of BackgroundSize mean the width and height arguments, respectively, are proportional rather than absolute. When that's the case the width and height should be in the range [0.0, 1.0], otherwise known as 0% to 100%. The two false arguments are contain and cover, respectively. They must be false for the width and height arguments to be used. In other words, that's telling JavaFX to make the image fill 100% of both the width and height of the Region. Note this will not maintain the aspect ratio of the image (see below).

See the documentation of BackgroundSize for more information:

Defines the size of the area that a BackgroundImage should fill relative to the Region it is styling. There are several properties whose values take precedence over the others. In particular there are 4 key properties, width, height, contain, and cover. Both width and height are independent of each other, however both interact with contain and cover.

From the CSS Specification, cover is defined to:

• Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

contain is defined to:

• Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

And width and height both specify (in absolute values or percentages) the size to use. These two properties only apply if both cover and contain are false. If both cover and contain are true, then cover will be used.

The width and height may also be set to AUTO, indicating that the area should be sized so as to use the image's intrinsic size, or if it cannot be determined, 100%.