JavaFX TextArea BackgroundImage wird nicht angezeigt

[ProggersWorld]

Hallo Zusammen,

In mein TextArea möchte ich eine vertikale Linie darstellen. Hierfür habe ich ein Image 1 x 16 px groß erstellt. Dieser wird wie folgt in mein TextArea eingefügt:

Image imgIcon = new Image(getClass().getResource("/resources/icons/16x16/line_vertical_red.png").toExternalForm());
        txtEditor.setBackground(new Background(new BackgroundImage(imgIcon, BackgroundRepeat.NO_REPEAT,
        BackgroundRepeat.REPEAT, new BackgroundPosition(Side.LEFT, 100.0, false, Side.TOP, 0.0, false), BackgroundSize.DEFAULT)));

Der "Linie" wird, wenn der Position in x auf 0 steht, gerade noch so am linken Rand angezeigt. Sobald ich den aber weiter nach rechts verschiebe, verschwindet der hinter mein TextArea. (Siehe Bilder). Dann sind nur noch oben und unten einzelne Pixel zu erkennnen.
Wie bekomme mein Image in den Vordergrund?

 

[LimDul]

Vermutung, die TextArea besteht aus mehreren Komponenten und da die nicht transparent sind, sieht man die Linie nicht.

Siehe Stackoverflow: https://stackoverflow.com/questions/21936585/transparent-background-of-a-textarea-in-javafx-8

The TextArea consists of several nodes. To make the background transparent it is necessary to change the background of the child panes as well (TextArea,ScrollPane,ViewPort,Content). This can be accomplished via CSS.

Vermutlich ist alles transparent machen nicht die Lösung, sondern du musst die "passende" Komponente finden, wo das drauf packen kannst (bzw. nur die drüber liegenden transparent machen)

 

[Mart]

die textarea hat einen content in dem musst du rum bauen in css kannst du so darauf zugreifen

.text-area {
    text-area-background:  linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
    -fx-font-size: 16px;
    -fx-text-fill: white;
    -fx-min-height: 200px;
    -fx-pref-height:400px;
}

.text-area .content {
    -fx-background-color: text-area-background ;
}

 

[ProggersWorld]

Danke für Eure Tipps!

so hat es funktioniert:

.text-area {
    text-area-background:  url("/resources/icons/16x16/line_vertical_red.png");
}

.text-area .scroll-pane .viewport{
    -fx-background-color: transparent;
}

.text-area .scroll-pane .content{
    -fx-background-color: transparent;
}