Background not centered when using -fx-background-size: cover with -fx-background-position: center center

2.2k Views Asked by At

I have successfully set a background image on a BorderPane in an FXML using CSS linked in my JavaFX project. However, using cover sticks the top-left corner of the background image to the top-left corner of the BorderPane. Cover itself scales the image well, but the image is not centered like it should be.

I have found multiple questions and answers saying you need to use -fx-background-position: center center; but it hasn't helped me at all. I implemented it in every position of my CSS, and also directly in FXML, without any success. I tried using options other than cover, such as auto, and they do center the background, but they crop the image instead of scaling it the way cover does.

Relevant parts of my code are as follows.

CSS:

#login{
    -fx-background-image: url("login-background.jpeg");
    -fx-background-position: center center;
    -fx-background-repeat: no-repeat;
    -fx-background-size: cover;
}

FXML:

<?xml version="1.0" encoding="UTF-8"?>

<BorderPane fx:id="localRoot" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="...">
   <center>
      <HBox alignment="CENTER" BorderPane.alignment="CENTER">
         <children>
            .
            .
            .
         </children>
      </HBox>
   </center>
</BorderPane>

Java:

@FXML
private BorderPane localRoot;

public void initialize() {
    localRoot.setId("login");
}
0

There are 0 best solutions below