(JavaFX FXML) While trying to make a custom button, how do I get an image to completely fill a button?

Question

(JavaFX FXML) I'm currently using scene builder to make an app and I'm trying to make a custom button, I managed to get an image onto the button but I can't figure out how to get the image to completely fill the button. any ideas? O, if there is an alternative way to create a custom button that would be helpful as well!

Here is my FXML code:

    <?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="165.0" layoutY="125.0" mnemonicParsing="false" prefHeight="150.0" prefWidth="270.0">
         <graphic>
            <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@case.png" />
               </image>
            </ImageView>
         </graphic>
      </Button>
   </children>
</AnchorPane>

The image fits into the button however I want it to completely fill the button, or if there are any different ways that would be much appreciated!!!

thank you in advance!

PS: I am using Scene Builder, any helpful tips for that application would be very helpful as well

Answer 1

If I understood correctly you don't want to see button borders and color at all. You might customize your button via such CSS:

.fill-btn {
-fx-graphic: url("@case.png");
-fx-background-color: inherit;
-fx-opacity: inherit;
-fx-border: none;
}

and declare it in your fxml:

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
<children>
    <Button stylesheets="@buttons-style.css" styleClass="fill-btn" layoutX="165.0" layoutY="125.0" mnemonicParsing="false" prefHeight="150.0" prefWidth="270.0">
    </Button>
</children>