JavaFX CSS button with image - how to determine image size?

Question

I am trying to insert an image using JavaFX CSS. Although, I can do this easily using the "- fx-graphic" tag, I cannot find a way to resize the image to whatever size I want.

I can do this through the following FXML code, where I give 30 of my preferred image width, but I would like to do this with pure CSS. Is there any way to do this?

FXML

<Button text="Press Me"> <graphic> <ImageView fitWidth="30"> <image> <Image url="myImage.png"/> </image> </ImageView> </graphic> </Button> 

CSS

 #buttonWithImage { -fx-graphic: url("myImage.png"); } 

Answer 1

I had the same problem and found a workaround: instead of using -fx-image I use -fx-background-image .

Note. I am using the optional lib library to use the svg file in the following example.

CSS

 #buttonWithImage { -fx-background-image: url('myimage.svg'); -fx-background-size: 30px; -fx-background-repeat: no-repeat; -fx-background-position: 90%; }