I've been attempting to add an animated gradient to my header class, but so far I haven't been successful.
I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference:
Can anyone offer some insight on what might be causing this issue? Any help would be greatly appreciated.
Here's the HTML and CSS:
.business-header {
background: linear-gradient(50deg, #282466, #ffc500);
height: 400px;
-webkit-animation: test 2s ease infinite;
animation: test 2s ease infinite;
}
@-webkit-keyframes test {
0%{background-position:51% 0%}
50%{background-position:20% 100%}
100%{background-position:51% 0%}
}
@-moz-keyframes test {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
@keyframes test {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}<header class="business-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="tagline"></h1>
</div>
</div>
</div>
</header>