Listview in java with background transparent

Question

I have a listview into a borderpane that loads inside it some vbox, how can I set the background transparent to all item for see the background of my borderpane

I try to set all background of my item to transparent but it doesn't work

<VBox prefHeight="219.0" prefWidth="335.0" style="-fx-background-color: transparent;" stylesheets="@css/sheet.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.progetto.controller_graf.ViaggioController">


<Pane prefHeight="219.0" prefWidth="590.0" style="-fx-background-color: transparent;">
      <ImageView fx:id="imagine" fitHeight="219.0" fitWidth="335.0" pickOnBounds="true" preserveRatio="true" />
      <Pane prefHeight="219.0" prefWidth="335.0" style="-fx-background-color: transparent;">
         <children>
            <Rectangle arcHeight="5.0" arcWidth="5.0" fill="WHITE" height="44.0" layoutX="20.0" layoutY="161.0" stroke="WHITE" strokeType="INSIDE" width="301.0" />
            <ImageView fitHeight="38.0" fitWidth="36.0" layoutX="20.0" layoutY="164.0">
               <image>
                  <Image url="@css/immagini/calendario.png" />
               </image>
            </ImageView>
            <Text fx:id="data" layoutX="68.0" layoutY="189.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" styleClass="fontnuovo" text="Text" wrappingWidth="204.70003700256348" />
            <Text fx:id="prezzo" layoutX="284.0" layoutY="189.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" styleClass="fontnuovo" text="Text" />
            <Button fx:id="title" alignment="TOP_LEFT" layoutX="-15.0" layoutY="-9.0" mnemonicParsing="false" onAction="#pagetrip" prefHeight="79.0" prefWidth="292.0" style="-fx-background-color: transparent; -fx-font-size: 35; -fx-cursor: hand;" styleClass="fontnuovo" text="Button" />
         </children>
      </Pane>
   </Pane>
</VBox>

---

<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="650.0" prefWidth="1000.0" stylesheets="@css/sheet.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.progetto.controller_graf.ViewTripController">
   <center>
      <Pane prefHeight="200.0" prefWidth="200.0" styleClass="background" BorderPane.alignment="CENTER">
         <children>
            <ListView fx:id="listaview" prefHeight="522.0" prefWidth="436.0">
               <styleClass>
                  <String fx:value="list-view" />
                  <String fx:value="list-cell" />
               </styleClass></ListView>
         </children>
      </Pane>
   </center>
</BorderPane>

Answer 1

The minimum CSS needed to see "through" a default ListView is:

.list-view,
.list-view .list-cell {
    -fx-background-color: transparent;
}

If you are using custom cells with complex graphics, then make sure to style the nodes that make up the graphics appropriately. By default, no layout has any background applied except for the root of the scene. That means any layout in your cell will be transparent unless you explicitly make them opaque. As for controls, some have backgrounds by default and others do not. You will have to style them as you need.

Note the above CSS does not do anything with the scroll bar. It also removes the background styling for selected and focused cells, though the text will still become white when a cell is selected. You will have to add your own styling for that as needed.

Here are some helpful resources:

• JavaFX CSS Reference Guide – Documents how CSS works in JavaFX and the public structure of various controls, along with the available selectors and pseudo classes.

• modena.css – The default user agent stylesheet for JavaFX 8+. Study this if you want to see how controls are styled by default and how best to override those default styles.

And I recommend using stylesheets instead of setting the style property (whether in code or via FXML) whenever possible.

As an aside, if you find yourself hardcoding properties such as layoutX and layoutY then you are not using layouts correctly. Absolute positioning will not respond well to changes in the UI's size. You should be using the appropriate layout, or combination of layouts, to get the correct relative positioning of all your controls. For instance, an HBox would probably be of use to you. Or perhaps a GridPane if you need finer control.

---

Here's an example of a transparent list view with transparent list cells. The linear gradient applied to the root is there to show how what's behind the list view is visible to the user.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

  private static final String DATA_URI_STYLESHEET =
      """
      data:text/css,
      .root {
          -fx-background-color: linear-gradient(to bottom, #FFECD2, #FCB69F);
      }

      .list-view,
      .list-view .list-cell {
          -fx-background-color: transparent;
      }
      """;

  @Override
  public void start(Stage primaryStage) {
    var listView = new ListView<String>();
    for (int i = 1; i <= 100; i++) {
      listView.getItems().add("Item #" + i);
    }

    var scene = new Scene(new StackPane(listView), 600, 400);
    scene.getStylesheets().add(DATA_URI_STYLESHEET);

    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

To make running the example easier, the CSS is defined as a multiline string in the code and added to the scene as a data URI (this requires JavaFX 17+). However, for convenience, here is the CSS separately:

.root {
    -fx-background-color: linear-gradient(to bottom, #FFECD2, #FCB69F);
}

.list-view,
.list-view .list-cell {
    -fx-background-color: transparent;
}

Here is a screenshot of example: