The JavaFX CSS Property -fx-background-color is used to define the background fill, or fills, of a container Region object. The specified backgrounds will be rendered beneath any background images and are layered. Multiple background fills can be visible simultaneously, for example in the following circumstances:

  • Background fills are defined with higher layers utilizing transparency
  • Background fills are coupled with -fx-background-insets and -fx-background-radius properties to define multiple fills that do not completely overlap.

In both of these cases, the rendering behaviour of the -fx-background-color property is important. See the ‘Behaviour’ note below. -fx-background-color accepts a <paint> object, or a comma separated list of <paint> objects. These can include:

Required Parameters:

-fx-background-color requires that developers define only one parameter:

ParameterDescriptionValue
PaintThe paint texture to be rendered as the background of the container Region.<paint>

Multiple <paint> objects can be defined in a comma separated lists.

Parameter definition

In the following sections, the options for defining single and multiple colors are defined in detail.

1. Single Background Colors

> Color:

The simplest way to define a background color using CSS is to define a <color> object. See the documentation for the <color> object for more information on the available formats.

	-fx-background-color: red
-fx-background-color: red;

> Linear gradient

	-fx-background-color: linear-gradient(to right, red, blue);
linear-gradient(to right, red, blue)

> Radial gradient

	-fx-background-color: radial-gradient(center 50px 50px, 
radius 100px, red, blue);
radial-gradient(center 50px 50px,
radius 50px, red, blue);

> Image Pattern

An image pattern can be defined using either the image-pattern() function, or the repeating-image-pattern() convenience function. Here’s an example using the image-pattern() function.

-fx-background-color: 
        image-pattern("EdenCodingIcon.png", 10, 10, 32, 32, false);

2. Multiple Background Colors

The -fx-background-color JavaFX CSS property also accepts multiple <paint> objects in a comma-separated list. This can be useful in creating more atmospheric backgrounds for specific purposes.

> Multiple layers with transparency:

In cases where you don’t want to expose multiple backgrounds using background insets, it’s common to incorporate transparency into each layer, blending the backgrounds and giving users a richer experience. Transparency can be applied to both image patterns and fills (images must themselves have transparency, it cannot be set in JavaFX using CSS).

Code:
    -fx-background-color:
            linear-gradient(#4568DC, #B06AB3),
            repeating-image-pattern("https://edencoding.com/resources/wp-content/uploads/2021/02/Stars_128.png"),
            radial-gradient(center 50% 50%, radius 50%, #FFFFFF33, #00000033);
Layers (in the order they’re specified):

Linear gradient:

Dramatic night background

Star effect:

White stars, transparent bg

Vignette:

Radial gradient vignette

Result:

> Multi-layer depth effect

Layered background fills can also be used to give the impression of an object with a raised profile. This is used throughout JavaFX to create controls which appear to be elevated relative to the background.

Code:
	/* This is the background of the JavaFX Button object */

    -fx-background-color:
            white,
            #b5b5b5,
            linear-gradient(#fdfdfd, #e1e1e1),
            linear-gradient(#eeeeee, #d9d9d9);

    /* The actual Modena.css specifies several derived values for
     * each of these, but this is the default result when the button
     * is neither highlighted, nor focussed 
     */
Layers (in the order they’re specified):

Bottom highlight:

Insets: 0 0 -1 0
Type: Solid color
1px strip (bottom)

Grey border:

Insets: 0
Type: Solid color
Strong grey border

Border highlight:

Insets: 1
Type: Gradient
1px lighter border.

Main Fill:

Insets: 2
Type: Gradient
Main button color

Result:
A JavaFX Button object
How it works:

When specifying multiple backgrounds, there are a few things to bear in mind:

  • Backgrounds will by default overwrite each other unless transparency, insets or radii are used
  • Backgrounds are rendered in the order in which they’re specified (i.e. the bottom background is specified first).

Behaviour

Both rendering order and background’s attached properties are an important part of rendering multiple backgrounds:

1. Rendering Order:

When multiple background colors are defined, they will be rendered in the order that they are specified, meaning the first <paint> object will be rendered at the back, and the last <paint> object will be rendered at the front.

2. Combining with insets and radii:

It is also possible to define multiple backgrounds in combination with the -fx-background-insets and -fx-background-radius CSS properties. This will produce layered backgrounds that may not completely overlap. In fact, this is how the Button object background in JavaFX is defined.

Background fills, radii and insets are all defined in comma-separated lists. Every fill is therefore ‘matched’ with its corresponding radius and inset. If sufficient radii and insets aren’t defined, they default to zero

Check out the entries for -fx-background-insets and -fx-background-radius for their proper definition and use.

Syntax

/*
 *  Defined as a hexadecimal color
 */
-fx-background-color: #CECCFD;
-fx-background-color: #CECCFD; /* with tranparency */

/*
 *  Defined as a looked up color
 */
-fx-background-color: -fx-color;

/*
 *  Defined as a linear gradient
 */
-fx-background-color: linear-gradient(red, blue);

/*
 *  Defined as a radial gradient
 */
-fx-background-color: radial-gradient(center 50% 50%, radius 50%, red, blue, #16222A);

/*
 *  Defined as a radial gradient
 */
-fx-background-color: image-pattern("EdenCodingIcon.png", 0, 0, 10, 10, false);

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.

-fx-background-color can have the following values:

ValueDescription
<color>A color defined as a hexidecimal, RGB, HSB, looked-up or named color object
<linear-gradient>A linear gradient defined using the linear-gradient() function
<radial-gradient>A radial gradient defined using the radial-gradient() function
<image-pattern>An image pattern defined using the image-pattern() function, or the repeating-image-pattern() convenience function.

See Also