CSS - simple animation not showing up
I want to use a css animation in the upper part of my website. I have inserted a html frame and inserted the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(90deg,
rgba(242, 253, 255, 0.8),
rgba(95, 187, 243, 0.8),
rgba(83, 92, 255, 0.8),
rgba(3, 169, 244, 0.8)
);
background-size: 400%;
animation: sTransition 12s linear infinite; /* Slower animation */
font-family: sans-serif;
}
@keyframes sTransition {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
</style>
</head>
<body>
</body>
</html>
Nothing is displayed, the animation may be in the rendering in the background, but the Z index makes no difference.
You can find the site here: https://www.temporary-url.com/81861
Comments
Hi,
Can you explain where you want to assign this animation and how it should look, please?
Best regards
It should be placed in the background of the Header/Hero section. It should look like a typical gradient animation (something like this: https://codepen.io/finnhvman/pen/OxyxzG)
And ideally, the animation doesn't stop abruptly after the hero section.
You should only the CSS code from the <style> tag to Betheme -> Theme options -> Custom CSS & JS -> CSS.
And it should look like this:
However, it might need some adjustments, and it is a more advanced CSS, so you should contact your web developer regarding this.
Best regards
I have tried both versions (as html element or as pure CSS), neither of them works for me. How can I reach your developer?
We do not offer such customization. If you do not have your own web developer, you can ask for help on your FB group or under the following link: https://www.rewrkz.com/.
Best regards
Thanks, but I'm not asking for customisations, I just want to know how to change the background colour with CSS.
What you are proposing just doesn't work because (just guessing) other elements override the bg colour of the CSS.
If you want to use a custom CSS/JS/or any other feature that is not included in Betheme, it is a customization. Sorry, but we help only with minor CSS, but this one is more complex.
If you do not know how to adjust it to make it work, you should contact your web developer, and if you do not have any, check the links I sent in my previous message.
Best regards
Well, you don't have to implement the CSS I supplied, just show me how to change the entire background of the website with CSS, please. Surely that should be possible?
The CSS like this should work:
body{background:#f0f;}If it does not work, go to Betheme -> Theme options -> Global -> General, and check transparency for Header and Content.
Best regards