T
tomtothet
New Member
Hey fellows,
I'm quite new to Elementor and I need help with giving a container an animated background. I'm planning to use the container as my hero section and I find this to be the easiest way, because I will then be able to add text and other widgets via drag and drop, i.e. I won't have to define them using custom HTML. Please find the background I'd like to insert on codepen.io/Thomas-Thiel/pen/yyBVLmL.
I tried inserting an html widget equipped with custom HTML and CSS as following.
HTML
CSS
I'm facing 2 issues:
1. The background is only showing up if I give the background class a height using vh unit. Using 100% for example, nothing shows up. I then tried using 100% and assigning the background class to the html widget. Doing this, the element adapts the size of the parent container. However, I'm only seeing the gradient background then, which kind of makes sense as I assigned that class to it. I would like to see the whole animation as background and I need it to stretch to the full size of the parent container.
2. The approach of using an html widget does not allow me to place widgets like text above the background. That's why I would like to have the container to take on the background instead of an html widget.
I would really appreciate your help,
tomtothet
I'm quite new to Elementor and I need help with giving a container an animated background. I'm planning to use the container as my hero section and I find this to be the easiest way, because I will then be able to add text and other widgets via drag and drop, i.e. I won't have to define them using custom HTML. Please find the background I'd like to insert on codepen.io/Thomas-Thiel/pen/yyBVLmL.
I tried inserting an html widget equipped with custom HTML and CSS as following.
HTML
HTML:
<div class="background">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
CSS
CSS:
.background {
background: linear-gradient(132deg, #FC415A, #591BC5, #212335);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
position: relative;
overflow: hidden;
padding:0;
margin:0px;
flex: 1;
height: 100vh;
z-index: 0;
}
.cube {
position: absolute;
top: 80vh;
left: 45vw;
width: 10px;
height: 10px;
border: solid 1px #D7D4E4;
transform-origin: top left;
transform: scale(0) rotate(0deg) translate(-50%, -50%);
animation: cube 12s ease-in forwards infinite;
z-index: 1;
}
.cube:nth-child(2n){border-color: #FFF ;
z-index: 1;
}
.cube:nth-child(2){animation-delay: 2s;
left: 25vw;
top: 40vh;
z-index: 1;
}
.cube:nth-child(3){animation-delay: 4s;
left: 75vw;
top: 50vh;
}
.cube:nth-child(4){animation-delay: 6s;
left: 90vw;
top: 10vh;
}
.cube:nth-child(5){animation-delay: 8s;
left: 10vw;
top: 85vh;
}
.cube:nth-child(6){animation-delay: 10s;
left: 50vw;
top: 10vh;
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes cube {
from {
transform: scale(1) rotate(0deg) translate(-50%, -50%);
opacity: .8;
}
to {
transform: scale(30) rotate(960deg) translate(-50%, -50%);
opacity: 0;
}
}
I'm facing 2 issues:
1. The background is only showing up if I give the background class a height using vh unit. Using 100% for example, nothing shows up. I then tried using 100% and assigning the background class to the html widget. Doing this, the element adapts the size of the parent container. However, I'm only seeing the gradient background then, which kind of makes sense as I assigned that class to it. I would like to see the whole animation as background and I need it to stretch to the full size of the parent container.
2. The approach of using an html widget does not allow me to place widgets like text above the background. That's why I would like to have the container to take on the background instead of an html widget.
I would really appreciate your help,
tomtothet