How to change the style of a normal pane (Not layout pane)

Question

well i am new to JavaFx and i haven't been using java for a really long time, so i am having many problems. And the biggest is how to change the bg of the damn pane.

Below is the Controller class

//Styling prePane
public class Controller {


//Declaring elements
public Pane prePane;
public Button generate;
public TextArea info;
@FXML
ProgressBar progressBar;


public void onGenerate() throws IOException {

    //Styling prePane
    prePane=new Pane();
    prePane.getStyleClass().add("prePane");


    //Creating and embedding progressBar
    generate.setDisable(true);
    progressBar.setProgress(0);


    //Creating task object
    Task copyWorker = createWorker();
    progressBar.progressProperty().unbind();
    progressBar.progressProperty().bind(copyWorker.progressProperty());
    copyWorker.messageProperty().addListener(new ChangeListener<String>() {
        @Override
        public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
            System.out.println(newValue);
        }
    });


    //Starting task thread
    new Thread(copyWorker).start();


    //QR Code generation
    String details;
    info.getParagraphs();
    details=String.valueOf(info.getText());
    ByteArrayOutputStream out= net.glxn.qrgen.QRCode.from(details).to(ImageType.GIF).stream();
    File file=new File("D:\\JavaFXQRGenerator-master\\QrGenerator\\QrCode\\details.jpg");
    FileOutputStream fos=new FileOutputStream(file);
    fos.write(out.toByteArray());
    fos.flush();
}


//Defining the task
public Task createWorker() {
    return new Task() {
        @Override
        protected Object call() throws Exception {
            for (int i = 0; i < 10; i++) {
                updateProgress(i + 1, 10);
            }
            return true;
        }
    };
}

}

Main Class

public class Main extends Application {

@Override
public void start(Stage primaryStage) throws Exception{
    Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
    primaryStage.setTitle("QR Generator");
    primaryStage.setScene(new Scene(root, 300, 275));
    primaryStage.show();
}


public static void main(String[] args) {
    launch(args);
}

}

Below the actual Style sheet

.prePane{
        -fx-background-image: url("D:\JavaFXQRGenerator-master\QrGenerator\resources\genPane.jpg");
}

Any kind of help is appreciated.

Answer 1

Assuming the resources folder is part of your build path, genPane.jpg will be in the root of the classpath. So the correct path, according to the CSS documentation is just

.prePane{
        -fx-background-image: url("/genPane.jpg");
}