Change background image of a TitledPane

By means of a listener I intend to change the background image of a TitledPane although I have not achieved it. When you start the code, the style sheet shows the 'Down arrow.png' but expanding / collapsing the TitledPane disappears the image and nothing is displayed. The images I use are in the same folder as the code and the style sheet. The code that I am using is the following:

    titledPane.expandedProperty().addListener((obs, contraído, expandido) -> {
            if (expandido) {        
                titledPane.lookup(".title").setStyle(
                     "-fx-background-image : url('flechaAbajo.png'); "    
                );
            } else {
                titledPane.lookup(".title").setStyle(
                    "-fx-background-image : url('flechaArriba.png'); " 
                );                
            }
        });

The style sheet is:

.titled-pane > .title {
    -fx-background-image : url('flechaAbajo.png'); 
    -fx-background-repeat: stretch;   
    -fx-background-position: right;
}