JavaFX Scene CSS Doesnt Work


Question

mainClass.java:

public class mainClass extends Application{
    Scene scene;
    Group group;
    @Override
    public void start(Stage stg) throws Exception{
        stg.setTitle("Hi");
        stg.setWidth(600); stg.setHeight(250);
        group = new Group();
        scene = new Scene(group, 600, 250);
           scene.getStylesheets().add("mainClass.css");
        stg.setScene(scene);
        stg.centerOnScreen();
        stg.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

mainClass.css

.mainClass-scene{
    -fx-background-image: url("background.jpeg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 600 250;
    -fx-background-position: center center;
    -fx-effect: dropshadow(three-pass-box, black, 30, 0.5, 0, 0); 
}

Application work normally i show my frame but i cant saw background image on scene.Maybe css not working how i can resolve this problem?

Sory for my bad english thank you.

1
1
4/25/2013 9:41:38 PM

Accepted Answer

You have numerous problems with your program.

  1. You define a style class mainClass-scene but never use it.
  2. You use the css -fx-background-image attribute which only works on Regions, but you don't have any regions.
  3. You apply a drop shadow effect, but don't leave any insets around the background image for the drop shadow to be seen.
  4. You set the stage size to the same value as the scene size, but the stage has decorations, on it like title bars, etc so it can't be the same size.
  5. It is usually best to retrieve css files as a class resource.

poison

Here is an updated version which works for me and generates the image above.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class MainClass extends Application{
  @Override public void start(Stage stage) throws Exception{
    stage.setTitle("Hi");

    StackPane layout = new StackPane();
    layout.getStylesheets().add("mainClass.css");
    layout.getStyleClass().add("main-class");

    Scene scene = new Scene(layout, 600, 250);
    scene.getStylesheets().add(
      getClass().getResource("mainClass.css").toExternalForm()
    );
    stage.setScene(scene);
    stage.setResizable(false);
    stage.centerOnScreen();
    stage.show();
  }

  public static void main(String[] args) { launch(args); }
}

Associated css:

/**
 * file: mainClass.css
 *   Place in same directory as MainClass.java.
 *   Have your build system copy this file to your build output directory.
 **/

.main-class {
  -fx-background-image: url('http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/256/Poison-blue-icon.png');
  -fx-background-repeat: stretch;   
  -fx-background-size: 570 220;
  -fx-background-position: center center;
  -fx-effect: dropshadow(three-pass-box, black, 30, 0.5, 0, 0); 
  -fx-background-insets: 30;
}
3
4/25/2013 10:09:16 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon