JavaFX - Add image to ColorPicker

Question

I'm using netBeans and SceneBuilder to create a small window with a few text editor options. One of the buttons I've included in the screen is a colorPicker that I have modified according to the following style;

<ColorPicker fx:id="clrFill" layoutX="119.0" layoutY="18.0" prefHeight="30.0" prefWidth="30.0" style="-fx-color-label-visible: false; -fx-color-rect-height: 3; -fx-color-rect-width: 17;" styleClass="button" stylesheets="/css/colorPickerStyle.css" />

Here is the current stylesheet being used;

.color-picker .color-picker-label .picker-color
{
-fx-alignment : bottom-center;
}
colorPicker.getStyleClass().add("button");
.color-picker{
    -fx-background-image: "/gui_resources/fill.png"
    -fx-background-size: 20 20;
    -fx-background-position: top center;
}

My objective is to have an image display above the modified colorpicker 'rectangle' that displays the current color. Initially, I tried to treat the colorPicker as a Button class, as I have changed the style to a "button", but I was unable to place an image using the setGraphic method. As you can see from the css file, I have also tried to implement a background image unsuccessfully.

Here is a copy of what my screen currently looks like. The colorPicker is located beside the ComboBox dropdown.

Answer 1

In case you were trying to change the ColorPicker style class inside the css file, that won't work, you can't place code there.

Actually, to use an image, you don't need to change its style class, you just need to use url(image.png) (image placed in the same folder as FXML), or with a relative path to the FXML file like url(../image.png), or using @ in case of an absolute path.

This should work:

.color-picker {
    -fx-background-image: url(fill.png);
    -fx-background-size: 20 20;
    -fx-background-position: top center;
    -fx-background-repeat: no-repeat;   
}
.color-picker .color-picker-label .picker-color {
    -fx-alignment : bottom-center;
} 

You can check the <uri> format for the image here.