How to change the background color of a cection to an animated background based on custom css

[hutzimbl]

Hi together,

take the following screenshots as reference:

Start with Screenshot A. I want to change the dark blue background for this specific page with an animated background (that produces changing colors over time) for which I use the following custom css code:

@keyframes color {
  0%   { background: #33CCCC; }
  20%  { background: #33CC36; }
  40%  { background: #B8CC33; }
  60%  { background: #FCCA00; }
  80%  { background: #33CC36; }
  100% { background: #33CCCC; }
}

body {
  background: #33CCCC; /* Fallback */
  animation: color 9s infinite linear;
  text-align: center;
  padding: 2em;
}
h1 {
  text-align: center;
  font-family: 'Kavoon', sans-serif;
  font-size: 2.5em;
  color: white;
}

To do so, I selected “Selection1 > Custom > Element CSS” and added the css code given above.

The result is Screenshot B.

The CSS for switching the colors works but it is not the dark blue background that changed but instead the global background, which should not change, as it would interfer with the navigation bar which you see in the picture as well.

What do I miss? And how can I change the dark blue background only for this specific page?

Thanks in advance!

[ruenel]

Hey Neil,

Thanks for writing in! You may need to apply the custom CSS to the Section element instead. Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

Dev Tools demo

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.