The <image-pattern> JavaFX CSS data type is a sub-type of the <paint> data type. It represents a tiled image pattern, which can be generated using the image-pattern() and repeating-image-pattern() methods.

Example:

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

Warning

This JavaFX CSS data type has the associated warnings:

JavaFX Versions

The <image-pattern> data type and image-pattern() functions were introduced in JavaFX 8, and can’t be used in earlier versions of JavaFX (e.g. JavaFX 2.2 shipped with Java 1.7)

Data type

In spite of its name, the <image-pattern> is a type of <paint> and should be rendered using functions such as -fx-background-color, rather than using -fx-background-image.

CSS Parser

On testing, the image-pattern() method seems quite buggy. Check out the image-pattern() documentation if you are struggling to create meaningful image patterns using this data type.

Behaviour

The behaviour of the image-pattern() method appears buggy in two ways:

  • No ability to parse filename strings with directory control
  • Buggy interpretation of absolute and proportional anchor dimensions

Please see the documentation of image-pattern() for details on these bugs

Have you tested the features above and know how to get it to work? Please let me know so I can update this article and better help developers. You will be credited in the corrected entry. Click here

Syntax

/*Image pattern used to color the background of a container 
   In this case, it produces a grid of 10px x 10px EdenCoding icons.
   The tiled pattern will not deform as the container is resized
   as the proportional flag is set to 'false'*/
image-pattern("EdenCodingIcon.png", 0, 0, 10, 10, false);

/*Image pattern used tile the background of a container 
   In this case, it produces a 10 x 10 grid of EdenCoding icons.
   The tiled pattern will deform as the container is resized because
   the proportional flag is set to 'true'*/
image-pattern("EdenCodingIcon.png", 0, 0, 0.1, 0.1, true);