title: JavaFX - Centering BackgroundImage that covers BorderPane
body: <p>I am trying set <a href="https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BackgroundImage.html" rel="nofollow noreferrer"><code>BackgroundImage</code></a>  as background of <a href="https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html" rel="nofollow noreferrer"><code>BorderPane</code></a> (<a href="https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Pane.html" rel="nofollow noreferrer"><code>pane</code></a>) in JavaFX. I want that <a href="https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BackgroundImage.html" rel="nofollow noreferrer"><code>BackgroundImage</code></a> covers <a href="https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html" rel="nofollow noreferrer"><code>BorderPane</code></a> and that it is always positioned in the center. I want to do the same as in CSS (for web) with <a href="https://www.w3schools.com/cssref/pr_background-image.asp" rel="nofollow noreferrer">background-image</a>.</p>
  
  <p>I have already tried:</p>
  
  <ol>
  <li><p>Using CSS (fx-CSS)</p>
  
  <pre><code>package application;
  
  import javafx.application.Application;
  import javafx.stage.Stage;
  import javafx.scene.Scene;
  import javafx.scene.control.Button;
  import javafx.scene.layout.BorderPane;
  
  public class ExternalCSS extends Application {
      @Override
      public void start(Stage primaryStage) {
          try {
  
              //BorderPane()
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
              BorderPane borderPane = new BorderPane();
  
  
              //Button(String text)
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
              Button btn = new Button("Center");
  
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
              borderPane.setCenter(btn);
  
  
              Scene scene = new Scene(borderPane, 600, 600);
  
              URL path = getClass().getResource("resources/BackgroundStyle.css");
  
              if(path != null) {
                  scene.getStylesheets().add(path.toExternalForm());
              } else {
                  scene.getStylesheets().add("https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/BackgroundStyleExternalURL.css");
              }
  
              borderPane.setId("background_id");
  
              primaryStage.setScene(scene);
              primaryStage.show();
  
          } catch(Exception e) {
              e.printStackTrace();
          }
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre>
  
  <p>This code uses external CSS (you can find my CSS code <a href="https://github.com/4nds/CenteredBackgroundImage/blob/master/Background/src/application/resources/BackgroundStyle.css" rel="nofollow noreferrer">here</a>) or you can use this code below with inline CSS:</p>
  
  <pre><code>package application;
  
  import javafx.application.Application;
  import javafx.stage.Stage;
  import javafx.scene.Scene;
  import javafx.scene.control.Button;
  import javafx.scene.layout.BorderPane;
  
  public class InlineCSS extends Application {
      @Override
      public void start(Stage primaryStage) {
          try {
  
              //BorderPane()
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
              BorderPane borderPane = new BorderPane();
  
  
              //Button(String text)
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
              Button btn = new Button("Center");
  
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
              borderPane.setCenter(btn);
  
  
              Scene scene = new Scene(borderPane, 600, 600);
  
              URL path = getClass().getResource("resources/black_clock.png");
  
              String image = null;
              if(path != null) {
                  image = path.toExternalForm();
              } else {
                  image = "https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/black_clock.png";
              }                   
  
              borderPane.setStyle("-fx-background-image: url('" + image + "'); " +
                         "-fx-background-position: center center; " +
                         "-fx-background-repeat: no-repeat;" +
                         "-fx-background-size: cover");
  
              primaryStage.setScene(scene);
              primaryStage.show();
  
          } catch(Exception e) {
              e.printStackTrace();
          }
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre></li>
  <li><p>Using JavaFX only:</p>
  
  <pre><code>package application;
  
  
  import java.io.File;
  
  import javafx.application.Application;
  import javafx.stage.Stage;
  import javafx.scene.Scene;
  import javafx.scene.control.Button;
  import javafx.scene.image.Image;
  import javafx.scene.layout.Background;
  import javafx.scene.layout.BackgroundImage;
  import javafx.scene.layout.BackgroundPosition;
  import javafx.scene.layout.BackgroundRepeat;
  import javafx.scene.layout.BackgroundSize;
  import javafx.scene.layout.BorderPane;
  
  
          public class OnlyJavaFX extends Application {
      @Override
      public void start(Stage primaryStage) {
          try {
  
              //BorderPane()
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
              BorderPane borderPane = new BorderPane();
  
  
              //File(String pathname)
              //https://docs.oracle.com/javase/8/docs/api/java/io/File.html
              File file = new File("./src/application/resourcesa/black_clock.png");
  
              Image img = null;
              if(file.exists()) {
                  //Image(InputStream is)
                  //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
                  img = new Image(file.getAbsoluteFile().toURI().toString());
              } else {
                  //Image(String url)
                  //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
                  img = new Image("https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/black_clock.png");
              }
  
              //BackgroundSize(double width, double height, boolean widthAsPercentage, boolean heightAsPercentage, boolean contain, boolean cover)
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BackgroundSize.html
              BackgroundSize bgSize = new BackgroundSize(0, 0, false, false, false, true);
  
              //public BackgroundImage(Image image, BackgroundRepeat repeatX, BackgroundRepeat repeatY, BackgroundPosition position, BackgroundSize size)
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BackgroundImage.html
              BackgroundImage bgImg = new BackgroundImage(img,
                      BackgroundRepeat.NO_REPEAT,
                      BackgroundRepeat.NO_REPEAT,
                      BackgroundPosition.CENTER,
                      bgSize);
  
              //Background(BackgroundImage... images)
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Background.html
              Background bg = new Background(bgImg);
  
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Region.html#setBackground-javafx.scene.layout.Background-
              borderPane.setBackground(bg);
  
  
              //Button(String text)
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
              Button btn = new Button("Center");
  
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
              borderPane.setCenter(btn);
  
  
              Scene scene = new Scene(borderPane, 600, 600);
              primaryStage.setScene(scene);
              primaryStage.show();
  
          } catch(Exception e) {
              e.printStackTrace();
          }
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre></li>
  </ol>
  
  <p>Currentlly all versions of code (<a href="https://github.com/4nds/CenteredBackgroundImage/blob/master/Background/src/application/InlineCSS.java" rel="nofollow noreferrer">InlineCSS</a>, <a href="https://github.com/4nds/CenteredBackgroundImage/blob/master/Background/src/application/ExternalCSS.java" rel="nofollow noreferrer">ExternalCSS</a> and <a href="https://github.com/4nds/CenteredBackgroundImage/blob/master/Background/src/application/OnlyJavaFX.java" rel="nofollow noreferrer">OnlyJavaFX</a>) produces result like this:</p>
  
  <p><img src="https://image.prntscr.com/image/2b1a8TcRSp2Z69orxg0FJA.png" alt="sample image"></p>
  
  <p>Here is CSS and HTML code for the same example. This is how I want it to look like:</p>
  
  <p><img src="https://image.prntscr.com/image/7v73sh6fQ06QJ22SxT45Dg.png" alt="sample image"></p>
  
  <ul>
  <li><p><a href="https://jsfiddle.net/" rel="nofollow noreferrer">jsfidle</a> examples: <a href="https://jsfiddle.net/mykwjhL5/" rel="nofollow noreferrer">code</a>, <a href="http://jsfiddle.net/mykwjhL5/embedded/result/" rel="nofollow noreferrer">fullscreen</a></p></li>
  <li><p><a href="https://jsbin.com" rel="nofollow noreferrer">jsbin</a> examples: <a href="https://jsbin.com/qixonok/edit?html,css,output" rel="nofollow noreferrer">code</a>, <a href="https://output.jsbin.com/qixonok" rel="nofollow noreferrer">fullscreen</a></p></li>
  </ul>
  
  <p>Edit 1:</p>
  
  <p>I realized that I have posted old versions of my code so I will update that.
  (The only change in code is that now it will work even without image and CSS file saved on your computer and instead program will get it online.)</p>
  
  <p>Edit 2 after <a href="https://stackoverflow.com/users/1490322/jose-martinez">Jose Martinez's</a> <a href="https://stackoverflow.com/a/46046480/6476044">answer</a>:</p>
  
  <p>I have tested your code but it doesn't work. (I have even added translation of the background ImageView in direction of Y-axis, in your answer it was only in direction of X-axis, and also I have set the size of borderPane to match size of scene (app window) but it still doesn't work). Here is full code (same as in your answer but with minor fixes that I have already mentioned):</p>
  
  <pre><code>package application;
  
  
  import java.io.File;
  
  import javafx.application.Application;
  import javafx.stage.Stage;
  import javafx.scene.Group;
  import javafx.scene.Scene;
  import javafx.scene.control.Button;
  import javafx.scene.image.Image;
  import javafx.scene.image.ImageView;
  import javafx.scene.layout.BorderPane;
  
  public class Try1 extends Application {
      @Override
      public void start(Stage primaryStage) {
          try {
  
  
              //BorderPane()
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
              BorderPane borderPane = new BorderPane();
  
              //jot down the width and height of the scene
              double width = 600;
              double height = 600;
  
              //File(String pathname)
              //https://docs.oracle.com/javase/8/docs/api/java/io/File.html
              File file = new File("./src/application/resourcesa/black_clock.png");
  
              Image img = null;
              if(file.exists()) {
                  //Image(InputStream is)
                  //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
                  img = new Image(file.getAbsoluteFile().toURI().toString());
              } else {
                  //Image(String url)
                  //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
                  img = new Image("https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/black_clock.png");
              }
  
  
              ImageView background = new ImageView(img);
  
              //..center the background
              double translateX = width/2 - img.getWidth()/2;
              System.out.println(translateX);
              background.setTranslateX(translateX);
  
              double translateY = height/2 - img.getHeight()/2;
              System.out.println(translateY);
              background.setTranslateY(translateY);
  
              //Button(String text)
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
              Button btn = new Button("Center");
  
              //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
              borderPane.setCenter(btn);
  
              //make root with BorderPane and background image
              Group root = new Group (background, borderPane);
  
              Scene scene = new Scene(root, width, height);        
  
              primaryStage.setScene(scene);
  
              //this lines set borderPane's dimensions to be the same as scene
              borderPane.prefHeightProperty().bind(scene.heightProperty());
              borderPane.prefWidthProperty().bind(scene.widthProperty());
  
              primaryStage.show();
  
          } catch(Exception e) {
              e.printStackTrace();
          }
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre>
  
  <p>The problem is that this code works only when you start the program</p>
  
  <p><img src="https://image.prntscr.com/image/PVXykjXNQSeMTl5Otv6tZg.png" alt="sample image"></p>
  
  <p>and as soon as you resize (app) window it isn't centered anymore.</p>
  
  <p><img src="https://image.prntscr.com/image/FwniiQLnSMm3kAtdqfDjfA.png" alt="sample image"></p>