JavaFX How to set scene background image

Question

How can I set the background image of a scene?

score 50 · Answer 1 · answered Mar 16 '12 at 15:03

50

One of the approaches may be like this:

1) Create a CSS file with name "style.css" and define an id selector in it:

#pane{
    -fx-background-image: url("background_image.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 900 506;
    -fx-background-position: center center;
    -fx-effect: dropshadow(three-pass-box, black, 30, 0.5, 0, 0); 
}

2) Set the id of the most top control (or any control) in the scene with value defined in CSS and load this CSS file into the scene:

  public class Test extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        StackPane root = new StackPane();
        root.setId("pane");
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().addAll(this.getClass().getResource("style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

You can also give an id to the control in a FXML file:

<StackPane id="pane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="demo.Sample">
    <children>
    </children>
</StackPane>

For more info about JavaFX CSS Styling refer to this guide.

answered Mar 16 '12 at 15:03

Uluk Biy

48,655
13
146
153

I post another question earlier please help link here http://stackoverflow.com/questions/9736393/javafx-2-not-resizing-ui-control-based-on-window-size – John Mar 16 '12 at 17:30
can i change the scene background from another function, besides void start – Ossama Mar 22 '14 at 02:56
@Ossama yes you can. Define two different CSS selectors (having two different background proerties) and in some method change the node's id with desired one. – Uluk Biy Mar 22 '14 at 03:51
how can I do this. here is my code http://stackoverflow.com/questions/22572940/change-javafx-background-from-a-function – Ossama Mar 22 '14 at 03:55
Isn't one center enough? – Line Jan 29 '18 at 10:40
I know this is old and what I'm about to ask is probably a dumb question. But where exactly do I create the "style.css"? I have it in /res/css/style.css ... but it's throwing an error. – UndercoverCoder Jul 07 '20 at 17:52

score 43 · Answer 2 · edited Feb 16 '17 at 13:18

I know this is an old Question

But in case you want to do it programmatically or the java way

For Image Backgrounds; you can use BackgroundImage class

BackgroundImage myBI= new BackgroundImage(new Image("my url",32,32,false,true),
        BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT,
          BackgroundSize.DEFAULT);
//then you set to your node
myContainer.setBackground(new Background(myBI));

For Paint or Fill Backgrounds; you can use BackgroundFill class

BackgroundFill myBF = new BackgroundFill(Color.BLUEVIOLET, new CornerRadii(1),
         new Insets(0.0,0.0,0.0,0.0));// or null for the padding
//then you set to your node or container or layout
myContainer.setBackground(new Background(myBF));

Keeps your java alive && your css dead..

score 17 · Answer 3 · answered Mar 16 '12 at 15:15

17

You can change style directly for scene using .root class:

.root {
    -fx-background-image: url("https://www.google.com/images/srpr/logo3w.png");
}

Add this to CSS and load it as "Uluk Biy" described in his answer.

answered Mar 16 '12 at 15:15

Sergey Grinev

34,078
10
128
141

Oops! How can I make the image fill the entire scene? Its leaving white spaces at the left and top. – John Mar 16 '12 at 20:15
`-fx-background-repeat: stretch; ` – Sergey Grinev Mar 16 '12 at 21:59
It is still leaving space. The root of the scene is a GridPane and I'm centering gridpane on the scene. How can I prevent the background image from been centered? – John Mar 16 '12 at 22:46
`-fx-background-position: top left;` – Sergey Grinev Mar 16 '12 at 23:46
I'm setting the css to a borderpane using scene builder, it works when I run the app but I don't see any change in scene builder, do you know how to fix that? – Muhammad Ali May 25 '17 at 19:59

score 3 · Answer 4 · edited Dec 06 '20 at 09:58

In addition to @Elltz answer, we can use both fill and image for background:

someNode.setBackground(
            new Background(
                    Collections.singletonList(new BackgroundFill(
                            Color.WHITE, 
                            new CornerRadii(500), 
                            new Insets(10))),
                    Collections.singletonList(new BackgroundImage(
                            new Image("image/logo.png", 100, 100, false, true),
                            BackgroundRepeat.NO_REPEAT,
                            BackgroundRepeat.NO_REPEAT,
                            BackgroundPosition.CENTER,
                            BackgroundSize.DEFAULT))));

Use

setBackground(
                new Background(
                        Collections.singletonList(new BackgroundFill(
                                Color.WHITE,
                                new CornerRadii(0),
                                new Insets(0))),
                        Collections.singletonList(new BackgroundImage(
                                new Image("file:clouds.jpg", 100, 100, false, true),
                                BackgroundRepeat.NO_REPEAT,
                                BackgroundRepeat.NO_REPEAT,
                                BackgroundPosition.DEFAULT,
                                new BackgroundSize(1.0, 1.0, true, true, false, false)
                        ))));

(different last argument) to make the image full-window size.

JavaFX How to set scene background image

4 Answers4

Linked

Related