title: JavaFx set external background image programmatically
body: <p>I have problems setting a background image of an anchor pane dynamically.
  For developing purpose i put the external resources in the dist folder of the project, so the files are availiable.</p>
  
  <p>Code for the AnchorPane:</p>
  
  <pre><code>AnchorPane root = new AnchorPane();
  // this works fine, styles inside the css are used in components on the root pane
  root.getStylesheets().add("file:/D:/ProjectFolder/global.css");
  </code></pre>
  
  <p>What i can't figure out is how to set the path for a background image.
  Reading through the CSS and JavaFX references the path should be given relative to the css file. I also tried to creare URLs and URIs and absolute paths.</p>
  
  <pre><code>// path of compiled jar
  "D:/ProjectFolder/project.jar"
  // path of css file
  "D:/ProjectFolder/global.css"
  // path of background file
  "D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg"
  </code></pre>
  
  <p>All of these dont work:</p>
  
  <pre><code>root.setStyle("-fx-background-image: url('Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
  root.setStyle("-fx-background-image: url('/Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
  root.setStyle("-fx-background-image: url('./Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
  root.setStyle("-fx-background-image: url('@Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
  root.setStyle("-fx-background-image: url('@/Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
  root.setStyle("-fx-background-image: url('@./Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
  root.setStyle("-fx-background-image: url('D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
  root.setStyle("-fx-background-image: url('file:/D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
  </code></pre>
  
  <p>(on a sidenote the files exist, i checked the names of folders and files for case, this is correct too)</p>
  
  <p>For testing purpose:</p>
  
  <pre><code>import javafx.application.Application;
  import javafx.event.ActionEvent;
  import javafx.event.EventHandler;
  import javafx.scene.Scene;
  import javafx.scene.control.Button;
  import javafx.scene.layout.AnchorPane;
  import javafx.scene.layout.StackPane;
  import javafx.stage.Stage;
  
  public class BackGroundTest extends Application {
  
      private int backgroundtest = 0;
      private AnchorPane root;
  
      @Override
      public void start(Stage primaryStage) {
          Button btn = new Button();
          btn.setText("Test Background");
          btn.setOnAction(new EventHandler&lt;ActionEvent&gt;() {
              @Override
              public void handle(ActionEvent event) {
                  switch (backgroundtest) {
                      case 0: {
                          root.setStyle("-fx-background-image: url('Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                          break;
                      }
                      case 1: {
                          root.setStyle("-fx-background-image: url('/Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                          break;
                      }
                      case 2: {
                          root.setStyle("-fx-background-image: url('./Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                          break;
                      }
                      case 3: {
                          root.setStyle("-fx-background-image: url('@Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                          break;
                      }
                      case 4: {
                          root.setStyle("-fx-background-image: url('@/Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                          break;
                      }
                      case 5: {
                          root.setStyle("-fx-background-image: url('@./Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                          break;
                      }
                      case 6: {
                          root.setStyle("-fx-background-image: url('D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                          break;
                      }
                      case 7: {
                          root.setStyle("-fx-background-image: url('file:/D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg'); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                          break;
                      }
                  }
                  backgroundtest++;
                  if (backgroundtest == 8) {backgroundtest = 0;}
              }
          });
          root = new AnchorPane();
          root.getStylesheets().add("file:/D:/ProjectFolder/global.css");
          StackPane stack = new StackPane();
          root.getChildren().add(stack);
          AnchorPane.setBottomAnchor(stack, 0d);
          AnchorPane.setLeftAnchor(stack, 0d);
          AnchorPane.setRightAnchor(stack, 0d);
          AnchorPane.setTopAnchor(stack, 0d);
          stack.getChildren().add(btn);
  
          Scene scene = new Scene(root, 800, 600);
  
          primaryStage.setTitle("Test Background");
          primaryStage.setScene(scene);
          primaryStage.show();
      }
  
      /**
       * The main() method is ignored in correctly deployed JavaFX application.
       * main() serves only as fallback in case the application can not be
       * launched through deployment artifacts, e.g., in IDEs with limited FX
       * support. NetBeans ignores main().
       *
       * @param args the command line arguments
       */
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre>
  
  <p>css file :</p>
  
  <pre><code>.button {
      -fx-background-color:
          rgb(0, 50, 0, 0.08),
          rgb(0, 0, 0, 0.8),
          #090a0c,
          linear-gradient(#4a5661 0%, #1f2429 20%, #1f242a 80%),
          linear-gradient(#242a2e, #23282e),
          radial-gradient(center 50% 0%, radius 100%, rgba(135,142,148,0.9), rgba(255,255,255,0));
      -fx-background-radius: 7, 6, 5, 4, 3, 5;
      -fx-background-insets: -3 -3 -4 -3, -3, 0, 1, 2, 0;
      -fx-font-family: "Arial";
      -fx-font-size: 14;
      -fx-text-fill: white;
      -fx-padding: 5 10 5 10;
      -fx-effect: dropshadow( one-pass-box , rgb(0, 255, 0, 0.6), 10, 0.5 , 0 , 1 );
  }
  </code></pre>
  
  <p>It all works well if i include the css and the image into the jar file, but i want to use external files. Setting the path relative to the css file like all the references say does not seem to work, so what would be the correct path ?</p>