8 Replies Latest reply on Feb 26, 2014 10:57 AM by hemanthR

    Set browser (not stage) background to gradient

    mdharrington1

      HI...

       

      Very noob to css and all....

       

      I am trying to set my browseer background to a radial gradient...but I dont know the proper syntax.

       

      I am trying to reconcile this pages code

       

      http://www.w3schools.com/css/css3_gradients.asp....

       

      #grad

      {

      /* Safari 5.1 to 6.0 */

      background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

      /* Opera 11.1 to 12.0 */

      background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);

      /* Firefox 3.6 to 15 */

      background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

      /* Standard syntax */

      background: repeating-linear-gradient(red, yellow 10%, green 20%);

      }

       

       

      and somehow inject it into a composition ready statement like this

       

      $("body").css("background-color","#000");

       

      Ideally i would like a gradient to border the edges of the stage, just in the browser background instead of a solid color

       

      Thanks

        • 1. Re: Set browser (not stage) background to gradient
          hemanthR Adobe Employee

          To set your background to a gradient, you could add the above code in the style tag of the html file published by Aniamate i.e

          <style>

          .edgeLoad-EDGE-123145483 { visibility:hidden; }//this is added  by Animate

          body

          {

          /* Safari 5.1 to 6.0 */

          background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

          /* Opera 11.1 to 12.0 */

          background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);

          /* Firefox 3.6 to 15 */

          background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

          /* Standard syntax */

          background: repeating-linear-gradient(red, yellow 10%, green 20%);

          }

           

          </style>

          1 person found this helpful
          • 2. Re: Set browser (not stage) background to gradient
            mdharrington1 Level 1

            Wow, thanks for the prompt answer....

             

            So no way to do this inside edge?

             

            I was just hoping to see it in the preview browser....not a big deal though

            • 3. Re: Set browser (not stage) background to gradient
              mdharrington1 Level 1

              didnt seem to work...tried in IE and Chrome

               

              this is the code

               

              <!DOCTYPE html>

              <html>

              <head>

                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                        <title>Divine Eye Studios</title>

              <!--Adobe Edge Runtime-->

                  <script type="text/javascript" charset="utf-8" src="divine%20eye_edgePreload.js"></script>

                  <style>

                      .edgeLoad-EDGE-546946741 { visibility:hidden; }

                                  body

                                  {

                                            /* Safari 5.1 to 6.0 */

                                            background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

                                            /* Opera 11.1 to 12.0 */

                                            background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);

                                            /* Firefox 3.6 to 15 */

                                            background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

                                            /* Standard syntax */

                                            background: repeating-linear-gradient(red, yellow 10%, green 20%);

                                  }

                  </style>

              <!--Adobe Edge Runtime End-->

               

               

              </head>

              <body style="margin:0;padding:0;">

                        <div id="Stage" class="EDGE-546946741">

                        </div>

              </body>

              </html>

              • 4. Re: Set browser (not stage) background to gradient
                hemanthR Adobe Employee

                Hey HI,

                You can definitely add this within Aniamte too.

                In creation complete  ,add the below lines

                $("body").css({

                "background": "-webkit-repeating-linear-gradient(red, yellow 10%, green 20%)",

                "background": "-o-repeating-linear-gradient(red, yellow 10%, green 20%)",

                "background":" -moz-repeating-linear-gradient(red, yellow 10%, green 20%)",

                "background":" -ms-repeating-linear-gradient(red, yellow 10%, green 20%)",

                "background":" repeating-linear-gradient(red, yellow 10%, green 20%)"

                });

                I check the code both on Chrome 33 and IE 11.Its working for me.

                1 person found this helpful
                • 5. Re: Set browser (not stage) background to gradient
                  mdharrington1 Level 1

                  I got it to work in a new composition...but not my existing composition... even though I removed the code I had in for the solid background

                   

                  should only be a small matter to fix

                   

                  Thanks for the help...

                  • 6. Re: Set browser (not stage) background to gradient
                    darsh136

                    Hello,

                     

                    If you want to create some great gradient background in css3 there are free online tool that can help you:

                     

                    http://www.colorzilla.com/gradient-editor/

                     

                    Darsh

                    1 person found this helpful
                    • 7. Re: Set browser (not stage) background to gradient
                      mdharrington1 Level 1

                      Thanks Darsh....thats a useful tool

                       

                       

                       

                      rhemanthkumar,

                       

                      I just think I discovered the problem....but not the solution

                       

                      When 'center stage' is enabled....the gradients don't work

                      • 8. Re: Set browser (not stage) background to gradient
                        hemanthR Adobe Employee

                        That seems to be because the margin of stage is set to auto and the left,right,top,bottom are all 0px,thus your stage is completely covering the body.

                        1 person found this helpful