JavaFX display scene background image - image

Question

I’m developing a JavaFX application on Eclipse Kepler using the built-in FX library from Java SDK1.7.0_45. I want to display a background image in a scene. Following the tutorial provided in the Java documentation, following code should work:
public class Main extends Application {
public static void main(String[] args) {
Application.launch(args);
}
#Override
public void start(Stage primaryStage) {
GridPane grid = new GridPane();
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
scene.getStylesheets().add(Main.class.getResource("Login.css").toExternalForm());
primaryStage.show();
}
}
My CSV file looks like this:
.root {
-fx-background-image: url("background.jpg");
}
But I just get a blank screen instead. I have 3 files in the src/application folder: background.jpg, Main.java and Login.css.
I have tried adding a backslash, putting the image into a separate folder, providing an absolute path, providing several types of images, using ../application/background.jpg, changing the code to file:background.jpg, providing the URL directly into the code and dismissing the CSS file, using an imageview instead, ..... but nothing works.
I've taken a look at several other stackoverflow links, all seemed to fail:
JavaFX How to set scene background image (renders a blank screen)
Setting background image by javafx code (not css) exception)
Cannot load image in JavaFX
and many more.
The strange thing is, when I supply an image from a server as a hyperlink, everything works fine. Supplying the path to a local file never works though. What am I doing wrong? Can somebody show me how to display a local image? Is this a bug?

Answer 1

This worked fine for me with a .png, the only noticeable difference I had as opposed to you, was that I split up the .css file, and my background.png into a sub-package of the main one. Example:
my directory structure looks as follows:
sotestproject ----|
|
|---package sotestProject ---SOTestProject.java
|
|
|
|
package sotestProject.style
|
|---Login.css
|
|---background.png
using this breakdown, the following files with code successfully produced a background with an image:
SoTestProject.java:
package sotestproject;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
/**
*
* #author William
*/
public class SOTestProject extends Application {
#Override
public void start(Stage primaryStage) {
GridPane grid = new GridPane();
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
scene.getStylesheets().add(SOTestProject.class.getResource("style/Login.css").toExternalForm());
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);
}
}
Login.css:
.root {
-fx-background-image: url("background.png");
}
And then obviously my background.png is in the same directory as the .css file. The main 'change' in code is to note that with the scene.getStyleSheet() I used a reference to style/ instead of just the resource.
I hope this helps!
One thing to note: I'm compiling against the 32-bit jdk 7.0_45. That shouldn't make any difference, but there it is.

Answer 2

Partly thanks to the answer from WillBD, I decided to ditch Eclipse Kepler and start all over in Netbeans. I used the exact same code I provided in my question and now everything works just fine. I guess this is a bug between JavaFX and Eclipse Kepler.

Answer 3

Image file must be in the 'bin/application' directory and add your css definitions to the 'src/application/filename.css'

Answer 4

I've had the same problem in NetBeans and tried basically everything. Eventually, I discovered that the file extension "jpg" was written in capital letters in this "project hierarchy box" on the left side of NetBeans.
I changed that part of my code to all capital letters and tadaaa everything worked just fine.