different background in borderpane javafx

Question

I am using a VBox in the left position of my parent layout BorderPane. I want to use a css file to change and use an image background on the left side of the BorderPane which contains my VBox. I have the following in my ccs file but cant manage it to work.

 .vbox{
-fx-background-image: url("/ui/image11.jpg");
-fx-background-repeat: no-repeat;
-fx-background-position: center center;
-fx-background-size: 500 500;
}

.root{
-fx-background-color: #ecf0f1;
-fx-background-position: center center;
-fx-background-size: 500 500;
}

.button{
-fx-text-fill: #ecf0f1;
-fx-background-color: #455d7a;
-fx-position: center;
-fx-min-width: 150px;
-fx-transition-duration: 1;
} 

With this css file, rules in .root and .button do apply but not on .vbox. How can I manage the backgrounds of the different sections in BorderPane.

I import the css file with the following line of code:

 scene.getStylesheets().add(this.getClass().getResource("/styles/contentStyle.css").toExternalForm());

Is this the correct way? The css file is in another package.

Answer 1

VBox doesn't have a .vbox class selector defined. One way to fix this is to set a styleclass on your VBox called .vbox , like this:
myVBox.getStyleClass().add("vbox"); but you would need to do that for each VBox in your application if you wanted them all to have that background.

See this question about HBox s: JavaFX: Styling application with CSS Selectors for more info.