Return to previous page

Animated Banner / Background - by LisaA - on WordPress WooCommerce support

This topic has 3 replies, 2 voices, and was last updated 7 years, 2 months ago ago by 8theme

LisaA

Participant

January 22, 2017 at 14:10

On your https://www.8theme.com/demo/xstore/ demo, in the center of the page you show an animated background image were it says “Get 10% Off by liking us on Facebook”. I have duplicated the settings in the example but can not achieve the same effect (moving background). Is there a script or something that actually makes this work? Can you please provide instructions on how to do this?

#152703 Copied

2 Answers

LisaA

Participant

January 23, 2017 at 17:26

anyone?

#152820 Copied

8theme

Support staff

January 24, 2017 at 10:15

Hello,

Try to add this extra class name for the block with background anim-banner and add this code to the custom CSS

.anim-banner {
    background-repeat: repeat no-repeat !important;
    -webkit-animation: animatedBackground 30s linear infinite;
       -moz-animation: animatedBackground 30s linear infinite;
         -o-animation: animatedBackground 30s linear infinite;
            animation: animatedBackground 30s linear infinite;
}
@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 center;
    }
    to {
        background-position: -2076px center;
    }
}
@-moz-keyframes animatedBackground {
    from {
        background-position: 0 center;
    }
    to {
        background-position: -2076px center;
    }
}
@keyframes animatedBackground {
    from {
        background-position: 0 center;
    }
    to {
        background-position: -2076px center;
    }
}

Regards

#152896 Copied