The <uri> JavaFX CSS data type defines the location of a resource that is to be loaded by the CSS interpreter.

The <uri> data type is generated by the url() CSS function.

/* HTTP address */
url(https://edencoding.com/image.png)

/*  Local file  */
url(view.fxml)
url(../folder/styles.css)

Values

The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.

<uri> can have the following values:

ValueDescription
file:/C:/~/path/to/resource/styles.cssLocal files
https://edencoding.com/styles.cssWeb resources

Example

-fx-background-image can be used to set the background image on a Region node

CSS:

.content{
    -fx-background-image: url('../img/EdenCodingIcon.png');
}

.label{
    -fx-background-color: #fcc200;
}

FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<AnchorPane prefHeight="250.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/10.0.2-internal"
stylesheets="@../css/styles.css">
    <Label alignment="CENTER"
           text="Title Text"
           AnchorPane.leftAnchor="10"
           AnchorPane.rightAnchor="10"
           AnchorPane.topAnchor="10.0">
      <font>
         <Font name="System Bold" size="12.0" />
      </font>
    </Label>
   <AnchorPane styleClass="content"
               style="-fx-background-color: springgreen;"
               AnchorPane.bottomAnchor="10.0"
               AnchorPane.leftAnchor="10.0"
               AnchorPane.rightAnchor="10.0"
               AnchorPane.topAnchor="36.0" />
</AnchorPane>

See Also