JavaFX Scene Builder 2.0 how to add an Image to a Label


I am using JavaFX Scene Builder 2.0 and I would like to add an image to a label using FXML.

In oracle docs, we can find how to achieve this using Java code, but I would like to achieve this using Scene Builder

9/19/2014 10:40:43 AM

There are two ways to achieve this

  • Using FXML
  • Using CSS


<Label text="My Image">
      <ImageView fitWidth="150" preserveRatio="true" smooth="true">
          <Image url="myImage.png"/>

Inside Scene Builder, drag an ImageView on top of a Label and it will automatically be set as a graphic for the label. Then select the ImageView and type the url of the image into the ImageView's image field in the Scene Builder properties pane.


Assign an id to the Label in your FXML. You will also find an id as the property of the Label in Scene Builder

<Label text= "My Image" id = "labelwithimage"/>

Now you can either assign the css values directly in fxml(makes things clumsy) or create a new css file and define your attributes in it

Direct Assignment

<Label text= "My Image" id = "labelwithimage" style="-fx-graphic:url('myImage.png'); -fx-graphic-text-gap : 10;"/>

For defining it in a css file, you need to create a css file, define the atrributes against the id assigned to the Label and include it in the FXML


#labelwithimage {          
    -fx-graphic: url("myImage.png");
    -fx-graphic-text-gap : 10;

As you might have already guessed, -fx-graphic does everything that we wrote inside <graphic></graphic>, there are few other attributes like -fx-graphic-text-gap. You can find all the tags that can be used on Label in the css reference guide for label

Now the last thing in css is loading the css in the fxml. For this you need to include the following tag inside you fxml

    <URL value="@mycss.css" />

Just make sure to have the proper imports in the FXML

9/19/2014 6:51:18 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow