[Resolved] Adding CSS animated background on Header Element

[Mireia]

Hi!

I’m trying to figure out how put a css animated background on homepage element, for example this one: https://codepen.io/Mamboleoo/pen/BxMQYQ

I suppose I can enter the css in the editor, but where does the html go? Is there another way to do it?

Thank you very much!

[David]

Hi there,

what is the Home page element you’re trying to add it to ? Can you share a link so i can see?

[Mireia]

Hi David!

For our homepage we are using GP preumium, Elements – header element full screen.

Right now our website is on maintenance mode, but I open it for you to check some minutes: https://misterio.studio/

[David]

Hi there,

in your Hero content you will need to add some DIV wrappers like so:

<div class="hero-background">
    <!-- add your codepen background markup here -->
</div>
<div class="hero-foreground">
    <!-- add your other content here eg title and button -->
</div>

then you can position the background behind the foreground with this CSS:

.page-hero, .hero-foreground {
    position: relative;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[Mireia]

We have put the code but I’m afraid we didn’t get it. We don’t see if it’s the animation code or something that really has to do with the header.

Please, could you take a look to see if we have missed something??

Thank you very much!

[David]

Try this CSS:

.page-hero {
    overflow: hidden;
}

.page-hero .inside-page-hero {
    max-width: 100%;
}

.hero-foreground {
    position: absolute;
    top: 50%;
}

.background {
    width: 100vw;
    height: 100vh;
    background: #3E1E68;
}

.background span {
    width: 20vmin;
    height: 20vmin;
    border-radius: 20vmin;
    backface-visibility: hidden;
    position: absolute;
    animation-name: move;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.background span:nth-child(1) {
    color: #E45A84;
    top: 64%;
    left: 28%;
    animation-duration: 11.6s;
    animation-delay: -8.6s;
    transform-origin: -24vw -5vh;
    box-shadow: -40vmin 0 9.0982742695vmin currentColor;
}

.background span:nth-child(2) {
    color: #FFACAC;
    top: 73%;
    left: 82%;
    animation-duration: 10.6s;
    animation-delay: -0.4s;
    transform-origin: 13vw -6vh;
    box-shadow: -40vmin 0 14.664675849vmin currentColor;
}

.background span:nth-child(3) {
    color: #583C87;
    top: 82%;
    left: 41%;
    animation-duration: 11.7s;
    animation-delay: -5.2s;
    transform-origin: 20vw -12vh;
    box-shadow: 40vmin 0 7.7242551118vmin currentColor;
}

.background span:nth-child(4) {
    color: #E45A84;
    top: 14%;
    left: 70%;
    animation-duration: 12.7s;
    animation-delay: -12.5s;
    transform-origin: 18vw 2vh;
    box-shadow: 40vmin 0 12.6894088882vmin currentColor;
}

.background span:nth-child(5) {
    color: #E45A84;
    top: 80%;
    left: 26%;
    animation-duration: 15.1s;
    animation-delay: -6s;
    transform-origin: 2vw -12vh;
    box-shadow: 40vmin 0 8.0580043585vmin currentColor;
}

.background span:nth-child(6) {
    color: #E45A84;
    top: 51%;
    left: 48%;
    animation-duration: 12.5s;
    animation-delay: -9s;
    transform-origin: 2vw -8vh;
    box-shadow: 40vmin 0 10.6084008634vmin currentColor;
}

.background span:nth-child(7) {
    color: #583C87;
    top: 74%;
    left: 67%;
    animation-duration: 14.9s;
    animation-delay: -6s;
    transform-origin: -21vw -16vh;
    box-shadow: -40vmin 0 7.9985554337vmin currentColor;
}

.background span:nth-child(8) {
    color: #FFACAC;
    top: 35%;
    left: 62%;
    animation-duration: 13.9s;
    animation-delay: -7.2s;
    transform-origin: -1vw 17vh;
    box-shadow: 40vmin 0 14.9473729168vmin currentColor;
}

.background span:nth-child(9) {
    color: #FFACAC;
    top: 78%;
    left: 38%;
    animation-duration: 12.8s;
    animation-delay: -13.4s;
    transform-origin: -9vw -15vh;
    box-shadow: -40vmin 0 5.468786913vmin currentColor;
}

.background span:nth-child(10) {
    color: #583C87;
    top: 65%;
    left: 37%;
    animation-duration: 10.1s;
    animation-delay: -15.7s;
    transform-origin: 21vw -2vh;
    box-shadow: -40vmin 0 10.2966878003vmin currentColor;
}

.background span:nth-child(11) {
    color: #FFACAC;
    top: 92%;
    left: 38%;
    animation-duration: 13.1s;
    animation-delay: -6.5s;
    transform-origin: 8vw 0vh;
    box-shadow: 40vmin 0 5.6886634449vmin currentColor;
}

.background span:nth-child(12) {
    color: #E45A84;
    top: 33%;
    left: 94%;
    animation-duration: 15.8s;
    animation-delay: -6.3s;
    transform-origin: 15vw 12vh;
    box-shadow: -40vmin 0 5.5126499569vmin currentColor;
}

.background span:nth-child(13) {
    color: #E45A84;
    top: 90%;
    left: 71%;
    animation-duration: 10.1s;
    animation-delay: -7.5s;
    transform-origin: -13vw 12vh;
    box-shadow: -40vmin 0 14.0835114174vmin currentColor;
}

.background span:nth-child(14) {
    color: #E45A84;
    top: 72%;
    left: 70%;
    animation-duration: 15.6s;
    animation-delay: -6.8s;
    transform-origin: -7vw 8vh;
    box-shadow: -40vmin 0 6.8386562742vmin currentColor;
}

.background span:nth-child(15) {
    color: #FFACAC;
    top: 78%;
    left: 2%;
    animation-duration: 15.8s;
    animation-delay: -5.5s;
    transform-origin: -9vw 14vh;
    box-shadow: -40vmin 0 9.3385297753vmin currentColor;
}

.background span:nth-child(16) {
    color: #FFACAC;
    top: 96%;
    left: 65%;
    animation-duration: 13.2s;
    animation-delay: -9.7s;
    transform-origin: -2vw 11vh;
    box-shadow: -40vmin 0 10.464549728vmin currentColor;
}

.background span:nth-child(17) {
    color: #FFACAC;
    top: 71%;
    left: 59%;
    animation-duration: 11.7s;
    animation-delay: -1.1s;
    transform-origin: 24vw -8vh;
    box-shadow: 40vmin 0 8.6235907886vmin currentColor;
}

.background span:nth-child(18) {
    color: #E45A84;
    top: 63%;
    left: 14%;
    animation-duration: 15.9s;
    animation-delay: -1.4s;
    transform-origin: -8vw -19vh;
    box-shadow: 40vmin 0 12.8476037706vmin currentColor;
}

.background span:nth-child(19) {
    color: #E45A84;
    top: 87%;
    left: 3%;
    animation-duration: 10.3s;
    animation-delay: -9.2s;
    transform-origin: -18vw -13vh;
    box-shadow: -40vmin 0 14.1500077496vmin currentColor;
}

.background span:nth-child(20) {
    color: #583C87;
    top: 91%;
    left: 41%;
    animation-duration: 15.1s;
    animation-delay: -8.8s;
    transform-origin: 18vw 19vh;
    box-shadow: -40vmin 0 14.3134055532vmin currentColor;
}

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

[Mireia]

Thank you very much David! It worked! Best support ever.

[David]

Glad to be of help

[Author]

Posts