CSS Background Animation only in block - css

Question

I have The following animated background, currently displayed on the entire screen, I need you to only visualize in a block (<div class="c"> </ div>)
body {
margin:0;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
.c {margin:0 auto;}
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>
I always see on the whole screen, some suggestion to be able to see the animation only in a block (div)

Answer 1

Add the following css:
.c { height: 80px; }
.bg { height: 80px; }
Note: Change the sizes according to your taste.(height)
example:
body {
margin:0;
}
.c {
height: 80px;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
height: 80px;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>

Answer 2

Change '.bg' position to relative. Add a "container" div as the parent. The "container" should have the relative position. The footer is going to have the "absolute" position.
Take a look
body {
margin:0;
height: 100%;
position: relative;
}
.footer{
position:relative;
bottom:0;
height:50px;
background-color: #f7f7f7;
width: 100%;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
bottom:0;
left:-50%;
opacity:.5;
position:absolute;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
#keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
.c {margin:0 auto;}
<div class="container">
<div class="c">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
<h1>Only here animation</h1>
</div>
</div> <!-- /end animation -->
<div class="footer">Here without animation</div>
</div>