The following CSS should center the image within the Region, and the region should have a black background behind the image:

        setStyle("-fx-background-color: black;" +
                "-fx-background-image: url('javafx/scene/layout/test20x20.png');" +
                "-fx-background-repeat: no-repeat;" +
                "-fx-background-position: 50%");

The same HTML produces the correct output. JavaFX positions the image at the top-center. The CSSParser says:

            if( valueOne != null && valueTwo == null && valueThree == null && valueFour == null ) {
                // Only one value
                String v1 = valueOne.getText();

                if( "center".equals(v1) ) { ...
                } else if("left".equals(v1)) { ...
                } else if( "right".equals(v1) ) { ...
                } else if( "top".equals(v1) ) { ...
                } else if( "bottom".equals(v1) ) { ...
                } else {
                    left = parseSize(termOne);
                    right = ZERO_PERCENT;
                    top = ZERO_PERCENT;
                    bottom = ZERO_PERCENT;
                }

So we clearly will take the first item and give it whatever the correct percent is, but then for "top" we give it ZERO_PERCENT. The CSS Spec (http://www.w3.org/TR/css3-background/#background-position) states:

"If only one value is specified, the second value is assumed to be ‘center’"

Thus we should be setting top to FIFTY_PERCENT instead of ZERO_PERCENT.