Animated Background Gradient
-
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!!!!!
-
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. -
-
@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?
-
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 thebackground-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 renameAnimationName
however you want the gradient class to be named. -
@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
-
-
appears to be working on mobile though?
-
@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;
-
@edgrbnz THANKS! Ah ok, so I added the important and now it shows but does not animate :-(.
-
-
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?
-
@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 -
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.
-
Thanks! Yeah i will send over the log in soon
-
🤔
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?
-
@edgrbnz Thanks man, will have a play around with the plugins
-
Turned off all non essential plugins but no luck "/
-
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:
-
@edgrbnz Incredible, thanks so much!
I don't answer or check forum DMs, please just post on the forum.
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