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

Question

How to add background image to AnchorPane using Scene Builder?

I tried this as:

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

How I installed it 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 installing it directly in Scene Builder as:

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

A schema / protocol is required.

But the proposed method is to separate CSS styles in a CSS file. For example, you can create a CSS style class in your CSS file (name 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 directory and add the anchor style class to 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. Style sheets must be added to the root of the node (in the example, AnchorPane is the root).

Answer 2

I am new to JavaFX, but I added a background image to my AnchorPane without any encoding. Just drag the image. Is that what Scene Builder was created for, and not so? I think this is the best thing since sliced ​​bread.

1) I edited my background image using Photoshop to get the same size as my AnchorPane, 800 x 600 pixels. I also created a new empty file in Photoshop, the same size. File, New, Empty file. Then I copied the background image and pasted it on top of the empty file so that I could set the opacity to 50% (transparency). I like it, it makes the background image "soft".

2) I copied a 50% opaque (50% transparent) background image to the src (source) folder of my NetBeans project. The src folder is a regular Windows Explorer folder.

3) Drag the background jpg image from the src folder in Scene Builder as ImageView onto the AnchorPane (node) icon, which is located in the hierarchy document. Left side of Scene Builder. If the ImageView crashes somewhere else, drag it to where it belongs; you want AnchorPane to have this background.

4) With the ImageView background image selected (highlighted), correct the settings in the right pane of Scene Builder, Inspector, Layout: ImageView. Set cell snapping restrictions (web thing) on ​​the left and top, both to 0. And correct the size, font size 800, size 600.

As easy as pie. No coding needed, Scene Builder automatically writes the code for you. Also there is no need for a css file. What a pleasure, you can see what you are doing. Wysiwyg, what you see is what you get.