JavaFx css background not showing properly

Question

I'm trying to add a background to my java scene using a css file. The background I'm trying to achieve should look like this: http://lea.verou.me/css3patterns/#blueprint-grid

All I get in my screen, however, is a blue background with no white lines. This is how I implemented into my css-file:

.root {
    -fx-background-color:#269;
    -fx-background-image: linear-gradient(white 2px, transparent 2px),
      linear-gradient(90deg, white 2px, transparent 2px),
      linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    -fx-background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    -fx-background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

As you can see, I had to add -fx- to the beginning of every line, however the linear gradients remain invisible.

Answer 1

I don't believe you can use a linear-gradient as a value for -fx-background-image . Instead, layer some -fx-background-color s on top of each other:

.root {
    -fx-background-color: #269,
        linear-gradient(from 0px 0px to 20px 0px, repeat, rgba(255, 255, 255, 0.3) 0%, transparent 5%, transparent 95%, rgba(255, 255, 255, 0.3) 100% ),
        linear-gradient(from 0px 0px to 0px 20px, repeat, rgba(255, 255, 255, 0.3) 0%, transparent 5%, transparent 95%, rgba(255, 255, 255, 0.3) 100% ),
        linear-gradient(from 0px 0px to 100px 0px, repeat, white 0%, transparent 1%, transparent 99%, white 100% ),
        linear-gradient(from 0px 0px to 0px 100px, repeat, white 0%, transparent 1%, transparent 99%, white 100% );
}