How to add background-image to AnchorPane by using Scene Builder in JavaFX?

Question

How add background image to an AnchorPane by using Scene Builder?

I've tried it as:

-fx-background-image url('C:/Users/Documents/page_background.gif')

How I set this in Scene Builder.

And the generated FXML:

<AnchorPane id="LoginAnchorPane" fx:id="LoginAnchorPane" prefHeight="400.0" prefWidth="600.0" style="-fx-background-image: url('C:/Users/Documents/page_background.gif');" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafx_lsdu.LoginController">

Answer 1

You can try to set it directly in Scene Builder as:

-fx-background-image: url('file:C:/Users/Documents/page_background.gif')

It requires the scheme/protocol to be specified.

But the suggested way, to separate CSS styling in a CSS file. For instance you can create a CSS style-class in your CSS file (let's call it "application.css"):

application.css

.anchor {
    -fx-background-image:url('file:/C:/Users/Documents/page_background.gif');
}

Then in the FXML file you add this stylesheet to the root and you add the anchor style-class to the AnchorPane:

<AnchorPane prefHeight="545.0" prefWidth="712.0" styleClass="anchor" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.60">
  <stylesheets>
    <URL value="@application.css" />
  </stylesheets>
</AnchorPane>

Note: Stylesheets should be added to the root node (in the example the AnchorPane is the root).

Answer 2

I’m new to JavaFX, but I added a background image to my AnchorPane without any coding whatsoever. Simply drag and drop the image. That is what Scene Builder was designed for, not so? I think it’s the best thing since sliced bread.

1) I edited my background picture with Photoshop, to get the size the same as my AnchorPane, 800 x 600 pixels. I also created a new blank file in Photoshop, same size. File, New, Blank File. Then I copied my background picture and pasted it on top of the blank file, to enable me to set Opacity 50% (transparency). I like that, it makes my background picture “soft”.

2) I copied my 50% Opacity (50% transparent) background picture into the src (source) folder of my NetBeans project. The src folder is an ordinary Windows Explorer folder.

3) Drag and drop the background jpg image from the src folder into Scene Builder as an ImageView, onto the AnchorPane icon (node) which is in Document, Hierarchy. Left hand side of Scene Builder. If the ImageView drops somewhere else, drag it up to where it belongs, you want it in the AnchorPane, that's the background.

4) With your background image ImageView selected (highlighted) fix the settings on the right hand panel of Scene Builder, Inspector, Layout:ImageView. Set the Anchor Pane Constraints (the spider web thing) left and top, both to 0. And fix the Size, Fit Width 800, Fit Height 600.

As easy as pie. There is no need for coding, Scene Builder automatically writes the code for you. There is also no need for a css file. What a pleasure, you can see what you’re doing. Wysiwyg, what you see is what you get.