1 Reply Latest reply on Aug 22, 2013 4:33 AM by heathrowe

    background image fit full screen


      how to make bakground image fit full screen (enter page) and allow scrolling for content underneath?

        • 1. Re: background image fit full screen
          heathrowe Most Valuable Participant

          1. Import your bacground image into the Library (click the + to the far right of the Assets Tab to import your image).

          2. In the Elements Panel to the left of the Stage element you should see the actions { } icon; click it and from the actions list choose compositionReady.

          3. Paste the following into the compositionReady actions panel window, adjusting the the bold image reference I have to match the image you imported in step 1.



          $('html, body').css({

              "background": "url(images/yourImage.jpg) no-repeat fixed center",

              "-webkit-background-size": "cover",

              "-moz-background-size": "cover",

              "-o-background-size": "cover",

              "background-size": "cover",

              "filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yourImage.jpg', sizingMethod='scale')",

              "-ms-filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yourImage.jpg', sizingMethod='scale')"





          1 person found this helpful