1 Reply Latest reply: Feb 28, 2013 11:37 PM by jsmith RSS

    Running fullscreen on monitors with different aspect ratios

    992634
      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
          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.