4

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");
}
LukaM
  • 41
  • 4
  • Use a `StackPane` as the root node for the `center`. – SedJ601 Sep 06 '17 at 14:30
  • @SedrickJefferson I am not quite sure what exactly you meant. I replaced the `BorderPane` with a `StackPane`, set the ID to it and the background image loaded properly, but it was still not centered. Would you mind writing a few lines of code to help me? Thanks :) – LukaM Sep 06 '17 at 15:18
  • `BorderPane` has a `setCenter` method. If you are using `SceneBuilder`, you should see where you can set the center of the `BorderPane`. The `BorderPane`'s center root node should be set to `StackPane`. Then add your `HBox` to the `StackPane`. – SedJ601 Sep 06 '17 at 15:20
  • Post your complete `FXML` file. – SedJ601 Sep 06 '17 at 15:21
  • @SedrickJefferson I am adding the FXML's now. Sorry about the delay, I was finishing another part of the same project. – LukaM Sep 06 '17 at 16:25
  • @SedrickJefferson FXML's added. This entire project is on GitHub, I can share the link if you are interested, instead of posting more code here. – LukaM Sep 06 '17 at 16:33
  • It looks centered on my screen. What are you trying to do? – SedJ601 Sep 06 '17 at 16:38
  • Add the `GitHub` link. – SedJ601 Sep 06 '17 at 16:39
  • The only `ImageView` I see is to the left of "Library". Is this supposed to be the background Image? – SedJ601 Sep 06 '17 at 16:42
  • Okay, so you are trying to set the background image through `CSS`. If you post the `GitHub` link, I can probably find a fix. – SedJ601 Sep 06 '17 at 16:44
  • I suggest you try one of these [solutions](https://stackoverflow.com/questions/23515172/set-background-image-the-same-size-as-the-window-screen-in-java-app). I would start with the one that references the `JavaFX CSS Reference Guide` – SedJ601 Sep 06 '17 at 18:43
  • What I would do to solve this problem is set the width and height of the `Scene` and not allow resizing. – SedJ601 Sep 06 '17 at 18:49
  • @SedrickJefferson Unfortunately none of those fixes helped me, and not allowing resizing just wouldn't work for me. I am using the sam concept throughout the project and I need it to be resizable. It seems like one of my friends managed to fix it by implementing a whole new class with listeners. If you are interested in that, I can share another GitHub link or wait until we finish implementing it in our project. Anyways, thanks you very much :) – LukaM Sep 06 '17 at 19:26
  • I am glad you found a fix. – SedJ601 Sep 06 '17 at 19:55

0 Answers0