13

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

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

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");
}
javasuns
  • 1,061
  • 2
  • 11
  • 22
  • Im pretty sure you cant do it in CSS only. If you want to specify the size of the image view you probably need to do it through FXML or in the java code. – NDY May 07 '15 at 12:15

1 Answers1

19

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

Note: I use an additional lib to use 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%;
}
Roy Shmuli
  • 4,979
  • 1
  • 24
  • 38
pdem
  • 3,880
  • 1
  • 24
  • 38