Setting Background-Radius for Images

Question

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:

On which `Node` do you apply this effect? on the `ImageView` or a Layout ? — Bo Halim, Dec 26 '16 at 15:52
You have to add the same radius to the parent element that contains the image. — Obed Parlapiano, Dec 26 '16 at 16:28
@Harald My solution works correctly with an HBox, Show us your java code ! — Bo Halim, Dec 26 '16 at 17:03
See [border radius on ImageView](http://stackoverflow.com/questions/20489908/border-radius-and-shadow-on-imageview) — jewelsea, Dec 26 '16 at 18:24

Bo Halim · Answer 1 · 2016-12-26T18:58:51.190

3

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 !

edited Dec 26 '16 at 18:58

answered Dec 26 '16 at 16:52

Bo Halim

1,716
2
17
23

Yeah this is generally working, but I really don't know how to modify the path such that it would have the same effect as -fx-background-radius: 10px. Your solution looks like -fx-background-radius: 10%. The corners are stretched. – Harald Dec 26 '16 at 17:27
This is totally nice, but the window has to be resizeable. The only thing which will stay the same is the padding of the VBox. I hope there is an option, which allows the hbox to have the same radius all the time, without stetching. Thank you for investing so much time and effort in my question. – Harald Dec 26 '16 at 21:33
You can achieve something similar by adding a white border to the HBox. Make it really thick, then give a negative inset about 75% of the width of the border and all of this needs to be proportional to the radius. So I tried radius 60, width 40 and inset -32 and had good results. It might do funky stuff to the layout elements outside of your HBox, though. – DaveB Jun 01 '21 at 16:14

score 0 · Answer 2 · answered Jun 01 '21 at 00:41

0

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

answered Jun 01 '21 at 00:41

Sai Dandem

8,229
11
26

Setting Background-Radius for Images

2 Answers2