Animated Background Gradient

[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!!!!!

[edgrbnz]

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.

[fernandol97]

[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?

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

[fernandol97]

@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

[fernandol97]

[fernandol97]

appears to be working on mobile though?

[edgrbnz]

@fernandol97 said in Video backgrounds:

🤔

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:

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

[fernandol97]

@edgrbnz THANKS! Ah ok, so I added the important and now it shows but does not animate :-(.

[fernandol97]

[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?

[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

[edgrbnz]

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.

[fernandol97]

Thanks! Yeah i will send over the log in soon

[edgrbnz]

🤔

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?

[fernandol97]

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

[fernandol97]

Turned off all non essential plugins but no luck "/

[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:

[fernandol97]

@edgrbnz Incredible, thanks so much!