CODEWITHSUNDEEP
cssjavafx
Harald
Harald

Reputation: 546

Setting Background-Radius for Images

Is there a way in JavaFx (CSS) to get the same effect like when using -fx-background-radius: 20; for background images?

My test project looks like this:

The Main.css-file:

.root {
    -fx-background-image: url("space.png");
    -fx-padding: 50;
}

.hBox {
    -fx-background-image: url("background.jpg");
    -fx-background-radius: 10;
    -fx-padding: 0;
    /*-fx-shape:"M0 13,C0 5, 5 0, 13 0, L105 0, C113 0, 118 5, 118 13, L118 65, C118 73, 113 78, 105 78, L13 78, C5 78, 0 73, 0 65Z";*/
}

The Java Code:

public class Start extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        VBox vBox = new VBox();
        HBox hBox = new HBox();
        hBox.setPrefHeight(100);
        hBox.setPrefWidth(100);
        hBox.getStyleClass().add("hBox");
        vBox.getChildren().add(hBox);
        hBox.getChildren().add(new Label("Hallo"));


        Scene scene = new Scene(vBox, 1000, 800, false, SceneAntialiasing.BALANCED);
        scene.getStylesheets().add(Start.class.getResource("Main.css").toExternalForm());
        primaryStage.setTitle("Test");
        primaryStage.setScene(scene);
        primaryStage.setHeight(200);
        primaryStage.setWidth(200);

        primaryStage.show();

    }
}

But the result looks like this:

enter image description here

Upvotes: 0

Views: 1708

Answers (2)

Sai Dandem
Sai Dandem

Reputation: 9979

If anyone is still looking for a solution , a possible answer can be found here : Why is “-fx-background-radius: 10;” not working?

Upvotes: 0

Bo Halim
Bo Halim

Reputation: 1776

I think what you need to change is the Shape of your Layout so it looks like a capsule :

.theHBox{

-fx-background-image: url("../data/background.jpg");

-fx-shape:"M0 13 C0 5 5 0 13 0 L86 0 C94 0 99 5 99 13 L99 86 C99 94 94 99 86 99 L13 99 C5 99 0 94 0 86Z";
-fx-border-color: red; // not necessary
-fx-border-radius: 20;
-fx-border-width:5;

}

This may not be the best solution but it works and for the path it is a little ugly but you can find some better on the web !

Edit :

I think It's because the shape isn't relative to the size change of the layout, this is why the shape of the layout look stretched. I updated my path to fit the desired size (100 * 100) in your example, Hoping this will help you !

Upvotes: 3

Related Questions