Setting width/height of a control with CSS

Question

Hi,
I am styling a button a button in CSS and set a background-image for the button in my stylesheet.
The problem is, that the button should scale to the width/height of the image.
I added:
-fx-width: 32px;
-fx-height: 32px;
but it has no effect.
I also tried it with
-fx-min-width: 32px;
-fx-min-height: 32px;
If I use setMinWidth(32); in Java, it works.
But I rather want to set it in my stylesheets, because the image can change, if we use another skin.

Answer 1

CSS documentation (http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html) states:
"JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code."
I thought you might be able to do something using the -fx-shape property, but the shape does not affect the size of the button - so that didn't work.
I had more luck with the -fx-graphic property - you could try to enhance the stylesheet below to get what you want.
.root   { -fx-background-color: azure; -fx-padding: 20; }
#smurf-button { -fx-graphic: url("http://bluebuddies.com/smurf_fun/smurf_race/jpg/Smurf_Race_100x100.jpg"); -fx-background-color: transparent; }
#smurf-button:hover { -fx-effect: dropshadow( three-pass-box , rgba(184,134,11,0.6) , 20, 0.0 , 0 , 0 ); }
#smurf-button:armed { -fx-effect: innershadow( three-pass-box , rgba(0,200,0,0.6) , 30, 0.0 , 0 , 0 ); }
public class ButtonStyle extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  public void start(final Stage stage) throws Exception {
    final Button button = new Button();
    button.setId("smurf-button");
    final Scene scene = new Scene(StackPaneBuilder.create().children(button).build());
    scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
}