CODEWITHSUNDEEP
javacssjavafxfxml
Free Palestine
Free Palestine

Reputation: 1184

Background properties not working from stylesheet

I'm trying to set a background image for all buttons in the application, when I set it via FXML file it works fine but when I use CSS stylesheet to set it it doesn't work although some other properties are working fine from stylesheet like fonts properties.

This is my stylesheet code:

@font-face {
    font-family: 'AdvertisingExtraBold';
    src: url('/fonts/AdvertisingExtraBold.ttf');
}
@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url('/fonts/DroidKufi-Regular.ttf');
}
@font-face {
    font-family: 'Naskh';
    src: url('/fonts/droid-naskh.ttf');
}

.label {
    -fx-font-family: 'Kufi';
}

.button .text {
    -fx-font-family: 'AdvertisingExtraBold';    // This is working fine
    -fx-background-image: url('shutdown.png');  // This is not
    -fx-background-repeat: no-repeat;           // This is not
    -fx-background-size: 40;                    // This is not
}

But when I apply it in the FXML file like below it works fine:

<Button  prefHeight="40.0" prefWidth="40" style="-fx-background-image: url('shutdown.png');-fx-background-repeat: no-repeat;-fx-background-size: 40;" />

It's the same code, why it doesn't work from stylesheet?

What's the difference and why font properties are working while background-image aren't?

I'm loading the style sheet successfully like that :

scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

Upvotes: 0

Views: 66

Answers (2)

James_D
James_D

Reputation: 209543

A Button has background properties; the Text node it contains does not. The inline style works because you are applying the rules to the button. So 

.button .text{
    -fx-font-family: 'AdvertisingExtraBold';  
}
.button {
    -fx-background-image: url('shutdown.png');
    -fx-background-repeat: no-repeat;   
    -fx-background-size: 40;
}

will work.

Upvotes: 1

Bharat Karamur
Bharat Karamur

Reputation: 36

Try following in css file as you trying to override button style. 

-fx-background-image: url('shutdown.png') !important; 
-fx-background-repeat: no-repeat !important;           
-fx-background-size: 40 !important;

Upvotes: 0

Related Questions