Animated css gradient within element

Question

I've got a portfolio WordPress theme I'm adapting, and can't figure out how to apply this gradient to a specific element of my front page. I've had a look around online and so far figured out that the code below needs a more accurate selector to apply to, but the issue is finding that for the element in question!

body
 {background: linear-gradient(-45deg, #47bcc2, #bee9e8, #c4e7d4, #00bd9d, #8bd7d2);
    background-size: 400% 400%;
 animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

So I'd like the animated gradient to sit inside the teal coloured background area (currently an image). When you scroll down the teal background and title text fade to white, revealing a grid of projects.

I don't want to apply the gradient to 'body', but I'm not sure where to apply it so it functions like the teal image - fading on scroll.

This is the teal image element I'm trying to change in inspector - prior to any tweaks

I've managed to achieve the full body background with the image element disabled. It seems that the background-image overrides whatever gradient I try.

Current view - applying gradient to body, with image element disabled

I think the trouble is down to the transition/fade element being coded into that image section and overriding the linear gradient - but I'm fairly new to these kinds of tweaks! Is anyone able to point me in the right direction please?

Thanks!

EDIT: Here's the original css for the hero-header I'm trying to adapt - is it a case of putting the gradient css somewhere in here?

.hero-header {
  position: fixed;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 88; }
  .hero-header .media {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 88;
    position: absolute;
    opacity: 0;
    transform: translateZ(0) scale(1.015);
    transition: opacity 555ms cubic-bezier(0.39, 0.575, 0.565, 1) 100ms, transform 555ms cubic-bezier(0.39, 0.575, 0.565, 1) 200ms; }
    .hero-header .media.active {
      opacity: 1;
      transform: translateZ(0) scale(1); }
    .hero-header .media.unmount-transition {
      transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
      transform: translateZ(0) scale(1); }

Answer 1

To achieve the effect I desired, this is what I used!

Turns out I just needed to point the selector to the correct span, then !important the gradient properties. Not best practice I know, but just for this section is perfect!

.hero-header span {background-image: linear-gradient(-45deg, #47bcc2, #bee9e8, #c4e7d4, #00bd9d, #8bd7d2)!important;
    background-size: 400% 400%!important;
 animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}