Javafx css button graphic resize [duplicate]

Question

I want to change the size of an icon inside a button. The image has a size of 512 x 512, i want to resize to 16x16. So, what's the best way to acheive this using javaFX CSS.

Here is what i'm done until now :

#btnCancel.button {
    -fx-graphic: url("/img/close.png") ;
    -fx-graphic-size:16px 16px ; ( I think this property not exist in javafx css)

}

But this not works for me.

Answer 1

I am not aware of any css property that can be used directly to set the -fx-graphic's size but you can achieve similar results using -fx-background-image property. This will allow you to set width and height values using -fx-background-size.

You can access BackgroundSize's javadoc from this link

.logButton {
    /*
    -fx-graphic: url(images/log2.png);
    -fx-graphic-size:16px 16px;
    */
    -fx-background-image: url(images/log2.png);
    -fx-background-size: 64px 64px;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
}

See in action

Using -fx-graphic

Using -fx-background-image with -fx-background-size