This discussion is archived
1 Reply Latest reply: Feb 28, 2013 9:37 PM by jsmith RSS

Running fullscreen on monitors with different aspect ratios

992634 Newbie
Currently Being Moderated
I am trying to run a program in fullscreen on a projector. It works fine on my computer, but the background image appears stretched when I run it on a projector with a different aspect ratio. How can I run it as to prevent this?

This is how the code looks:
@Override
     public void start(Stage primaryStage) 
     {
          this.PrimaryStage = primaryStage;
          this.PrimaryStage.setFullScreen(true);
          ...
...which runs with this CSS file:
#background{
    -fx-background-image: url("background-full.png");
    -fx-background-repeat: stretch;
    -fx-background-position: center center;   
    -fx-background-size: auto 100%;
    -fx-background-color: black;
}
  • 1. Re: Running fullscreen on monitors with different aspect ratios
    jsmith Guru
    Currently Being Moderated
    Don't stretch the repeat
    -fx-background-repeat: no-repeat;

    AND

    -fx-background-size: cover;
    Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

    Or

    -fx-background-size: contain;
    Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

    Contain will provide a kind of letter box effect like watching an old 4:3 tv show a widescreen 16:9 TV.
    Cover will fill the screen with the image bug clip some of the image if the screen and image aspect ratios don't match.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points