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">

Cordelier

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).

Sporogony

"Absolute format" is the wrong here. It reqires the scheme/protocol to be specified or else it will do the lookup using the classloader. Furthermore it should be present in the CSS file too. – Morava

Thanks for the correction, I have updated the answer. – Sporogony

@Sporogony Can we get current dir instead of C:/ ...? For example, how can I get ../../resources/hello.png this pic? – Trumantrumann

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.

Rosalindarosalinde

Please refrain from telling people something is easy (or "easy as pie") - it's easy to you, not to the OP or anyone else not knowing how to do this. – Hellbox

Thank you David. Will do. Rather … won’t do again. I assume OP means 'original poster', the person who originally posted the question. – Rosalindarosalinde

Answer 3

You need to make a new CSS file and put code given below in it write your image name in url.

.bodybg{
     -fx-background-image: url('**your image name**.jpg');
     -fx-background-size: 100% 100%;    
  }

after this you have to select your anchor pane go to their properties and select CSS Style sheet and select Stle class. After this your background will change.

I have found a complete tutorial explaining all point in detail Change your Application Background in Scene Builder

Adequate