Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Animated Background Gradient

    General Discussion
    3
    25
    577
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      fernandol97 last edited by fernandol97

      Hey, I'm trying to use a html 5 video as a background for the about page on a website. The video is a animated gradient so I don't really care about it being stretched etc. The closest thing I can get to is putting a video as browser row height? Any help on how I can achieve the video to become a full screen background for the about page ??

      Thanks!!!!!

      0_1569840281476_Screenshot 2019-09-30 at 11.40.49.png

      1 Reply Last reply Reply Quote 0
      • edgrbnz
        edgrbnz last edited by

        Yo!
        Best way to do this would be to use custom CSS with an animated gradient. That way you could easily apply the background to the body tag of the page id.

        ✦ ✦ ✦

        1 Reply Last reply Reply Quote 0
        • F
          fernandol97 last edited by

          0_1569840342151_Screenshot 2019-09-30 at 11.42.09.jpg

          1 Reply Last reply Reply Quote 0
          • F
            fernandol97 last edited by fernandol97

            @edgrbnz Ah ok, I don't have much css knowledge but will take a look! Once I create the gradient using the link you gave me where do I add the css code it gives me? do I enter it in here? 0_1569841272435_Screenshot 2019-09-30 at 12.00.35.png

            1 Reply Last reply Reply Quote 0
            • edgrbnz
              edgrbnz last edited by edgrbnz

              Hm no…
              Best is you just add it to the page-id in question in the Custom CSS section of Lay.
              Somewhat like the example below:

              /* Animated Bckg Gradient*/
              
              body.type-page.id-13 {
                  background: linear-gradient(270deg, #f70000, #0067f7);
                  background-size: 400% 400%;
                  background-attachment: fixed;
              
                 -webkit-animation: AnimationName 30s ease infinite;
                 -moz-animation: AnimationName 30s ease infinite;
                 animation: AnimationName 30s ease infinite;
              }
              @-webkit-keyframes AnimationName {
                  0%{background-position:0% 50%}
                  50%{background-position:100% 50%}
                  100%{background-position:0% 50%}
              }
              @-moz-keyframes AnimationName {
                  0%{background-position:0% 50%}
                  50%{background-position:100% 50%}
                  100%{background-position:0% 50%}
              }
              @keyframes AnimationName {
                  0%{background-position:0% 50%}
                  50%{background-position:100% 50%}
                  100%{background-position:0% 50%}
              }
              

              Inside body.type-page.id-13 the id–Number should be the one of the page you want the animated gradient to be applied to. You can find out how to do so over here in the section CSS based on current page.

              I added the background-attachment: fixed; to make the gradient stay in place while scrolling – it feels better that way but you could delete that line if you so desire.
              If the gradient doesn’t seem to fill you whole page you may want to experiement with the background-size: 400% 400%; and raise the number to e.g. background-size: 1200% 1200%; or the like.

              Of course:
              replace all the keyframes and color codes, speed etc variables with the ones you prefer. (the stuff from the generator)

              Hope that helps!!


              Optional:
              You can rename AnimationName however you want the gradient class to be named.

              ✦ ✦ ✦

              F 1 Reply Last reply Reply Quote 0
              • F
                fernandol97 @edgrbnz last edited by

                @edgrbnz Thank you so so much for that info! I feel like im close, I copied the code you gave me into the custom css for desktop version and replaced the "body.type-page.id-13" with "body.type-page.id-307" since that's what my about page seems to be, from looking at the inspector. however the gradient only briefly appears when loading up the page, the page then resumes to its original state? :S 0_1569847289291_Screenshot 2019-09-30 at 13.37.27.jpg

                1 Reply Last reply Reply Quote 0
                • F
                  fernandol97 last edited by

                  0_1569847447420_Screenshot 2019-09-30 at 13.43.48.png

                  1 Reply Last reply Reply Quote 0
                  • F
                    fernandol97 last edited by

                    appears to be working on mobile though? 0_1569847787385_Screenshot 2019-09-30 at 13.48.29.jpg

                    1 Reply Last reply Reply Quote 0
                    • edgrbnz
                      edgrbnz last edited by edgrbnz

                      @fernandol97 said in Video backgrounds:

                      0_1569847447420_Screenshot 2019-09-30 at 13.43.48.png

                      🤔

                      You can ignore that info Imho. You could also write: body.id-307 should work either way.

                      Strangely it works for me. But you could either try to deactivate your cache in the dev console. Perhaps something is cached so your new CSS doesn’t apply:
                      0_1569849689410_Window_and_Imeracon_—_Immobilie.jpg

                      Or try to add !important to the background like so:
                      background: linear-gradient(270deg, #f70000, #0067f7) !important;

                      ✦ ✦ ✦

                      F 1 Reply Last reply Reply Quote 0
                      • F
                        fernandol97 @edgrbnz last edited by

                        @edgrbnz THANKS! Ah ok, so I added the important and now it shows but does not animate :-(. 0_1569850397389_Screenshot 2019-09-30 at 14.31.35.jpg

                        1 Reply Last reply Reply Quote 0
                        • F
                          fernandol97 last edited by

                          0_1569850532590_Screenshot 2019-09-30 at 14.33.03.png

                          1 Reply Last reply Reply Quote 0
                          • edgrbnz
                            edgrbnz last edited by edgrbnz

                            You could add !important to other elements, too. Or try to remove the .type-page. Perhaps that’s what messes it up. CSS always involves a bit of tinkering 🙂

                            Do you have a link for the site in question?

                            ✦ ✦ ✦

                            F 1 Reply Last reply Reply Quote 0
                            • F
                              fernandol97 @edgrbnz last edited by fernandol97

                              @edgrbnz Thanks for helping me out man. Yeah is fernandolobina.com
                              I tried your suggestions, when adding !important to other elements the gradient seems to not appear at all. :-( super inexperienced in css to have any idea how to problem solve

                              1 Reply Last reply Reply Quote 0
                              • edgrbnz
                                edgrbnz last edited by

                                Weird!

                                It looks perfectly fine in the inspector… perhaps @mariusjopen can point out the error here? It musst be a minor thing: the gradient is showing, even the animation steps are shown in the inspector… it’s just not playing.

                                But if you don’t mind you could send me the admin login credentials (via DM/Chat) and I’ll have a look as soon as my projects and time would allow it.

                                ✦ ✦ ✦

                                1 Reply Last reply Reply Quote 0
                                • F
                                  fernandol97 last edited by

                                  Thanks! Yeah i will send over the log in soon

                                  1 Reply Last reply Reply Quote 0
                                  • edgrbnz
                                    edgrbnz last edited by

                                    🤔

                                    I tryed. I also set the animation to the overall body tag to see if the issue comes from the ID. But no luck… sorry 🤷‍♀️

                                    There are a lot of plugins installed on your site, though – Perhaps one of them is blocking something? I’d try to deactivate plugins you don’t use and check if it works one after the other.

                                    Perhaps @mariusjopen can point us in the right direction?

                                    ✦ ✦ ✦

                                    F 1 Reply Last reply Reply Quote 0
                                    • F
                                      fernandol97 @edgrbnz last edited by fernandol97

                                      @edgrbnz Thanks man, will have a play around with the plugins

                                      1 Reply Last reply Reply Quote 1
                                      • F
                                        fernandol97 last edited by

                                        Turned off all non essential plugins but no luck "/

                                        1 Reply Last reply Reply Quote 0
                                        • edgrbnz
                                          edgrbnz last edited by edgrbnz

                                          Got it 😂

                                          It worked all along, but the Animation was set to 42 seconds… so it was just very hard so see. 🙃I turned it down to 4 seconds.

                                          You can play around with these settings (size & timing) to fine-tune the appearance:
                                          0_1570004506201_Window_and_Custom_CSS___HTML_‹Fernando_Lobina—_WordPress.jpg

                                          ✦ ✦ ✦

                                          F 1 Reply Last reply Reply Quote 0
                                          • F
                                            fernandol97 @edgrbnz last edited by

                                            @edgrbnz Incredible, thanks so much!

                                            1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post
                                            Post a link to where the problem is
                                            I don't answer or check forum DMs, please just post on the forum.
                                            Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                                            Before you post:

                                            Use the Search Feature. Maybe there is already a solution to your issue.

                                            1. Update Lay Theme and all Lay Theme Addons
                                            2. Disable all Plugins
                                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                            4. Now see if your problem solved itself
                                            5. Go here, see if your problem is listed here:
                                            Troubleshooting

                                            When you post:
                                            1. Post a link to where the problem is
                                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                            Thanks!

                                            Online Users

                                            Recent Topics

                                            • F

                                              scroll Overflow on mobile is not working

                                            • P

                                              Different Menu color on Fullscreenslider adding id/class to row

                                            • S

                                              DISABLED FIREFOX LAZYLOADING BRAKES WEBSITE

                                            • Project Thumbnail Grid only showing first two entries

                                            laytheme.com