Creating Animated Gradient Background for Section

[nickyker]

We’re trying to create a gradient background for the header section of our site. It works fine in preview, but nothing shows on the live version. We tried the options suggested in prior help docs (e.g. using the element css rather than page css), but to no avail.

Here’s the CSS we’re using:
.x-bg {
background: linear-gradient(266deg, #01426a, #01426a, #0085ca, #01426a);
background-size: 800% 800%;

-webkit-animation: HeaderAnimation 32s ease infinite;
-moz-animation: HeaderAnimation 32s ease infinite;
-o-animation: HeaderAnimation 32s ease infinite;
animation: HeaderAnimation 32s ease infinite;

}

@-webkit-keyframes HeaderAnimation {
0%{background-position:0% 97%}
50%{background-position:100% 4%}
100%{background-position:0% 97%}
}
@-moz-keyframes HeaderAnimation {
0%{background-position:0% 97%}
50%{background-position:100% 4%}
100%{background-position:0% 97%}
}
@-o-keyframes HeaderAnimation {
0%{background-position:0% 97%}
50%{background-position:100% 4%}
100%{background-position:0% 97%}
}
@keyframes HeaderAnimation {
0%{background-position:0% 97%}
50%{background-position:100% 4%}
100%{background-position:0% 97%}
}

Any chance you could point us to what we’re doing wrong? Many thanks!

[tristup]

Hi @nickyker,

Thanks for reaching out.
We don’t offer any support or investigation on custom CSS code, I would suggest you hire a developer who can assist you on this or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks