2 Replies Latest reply on Apr 22, 2014 12:30 AM by ada_mju

    I want to use CSS style - background-size:cover;

    PAINTERCOMdmp Level 1

      in my animation. The responsive settings dont allow for this effect anywhere so I was thinking of putting it in the _edge.js file but, I'm assuming, becasue the Stage is the parent it will fill but distort with the Stage?

       

      I've watched the flexible design videos for Edge and Edge preview but neither cover the effect I want which is use in the Cod Drops example:

       

      http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

       

      Would a separate CSS file work?

       

      Cheers

       

      Bret

        • 1. Re: I want to use CSS style - background-size:cover;
          heathrowe Most Valuable Participant

          You can use a separate css file, though if you go this route it's preferable to use the append method at the Stage > compositionReady event handler.

           

          Example

           

          ////////// Stage > compositionReady///////////////////

          $("head").append("<link id='mycss' href='style.css' type='text/css' rel='stylesheet' />");

          /////////////////////////////////////////////////////////////////////

           

          Directly editing the .html file and placing a reference to an external .css file will be overwritten everytime you open it in Edge Animate.

          The above snippet will help resolve that.

           

          hth

           

          Darrell

          1 person found this helpful
          • 2. Re: I want to use CSS style - background-size:cover;
            ada_mju Level 2

            Hi,

             

            I was looking for responsive slideshow and found this. Now we have 2014 and with new EA there is one button to enable responsive scaling.

            However, I made small gallery for website (630px X 422px), but when I paste into DWCC and view in LIVE view everything below is pushed down. Images scale perfect, but the stage DIV stays static.
            In HTML code shows always width and hight in px regardless what I do in EA. I tried to do the same as with images, to delete width and hight in html, but then slide completly disapear. Then I tried other set up and make everything div/img in EA 100%, (static cannot make 100%) but it still shows px and div stage static.

            How can I fix it to make stage resizable? Thanks

             

            Adam