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");
}