Create Moving Background Image Animation using Free Elementor Page Builder

Creating a moving Background image animation using Free Elementor page builder seems very easy to me now. Here you need to add some CSS code within the page. There is a way to add CSS code free Elementor too.

I am going to share something amazing with background image. It was really fun to create something awesome which seems eye catching.  Here is two sources on different types of Elementor Page Background and Elementor Skewed Background Make sure to check this if you want to arrange your elementor page or sections background in a creative way. 

What Is a Moving Background Image Animation?

A moving background image animation is a looping CSS animation that slowly slides a wide background image behind your page content, so the section feels alive without loading a video file. In Elementor you build it with a full-height section, two spacers carrying the CSS IDs bg and overlay, and a short block of CSS @keyframes code pasted into an HTML widget — no Elementor Pro licence and no JavaScript required. It is one of the lightest Elementor animation effects you can add, because the browser animates a single transform instead of playing media.

First let’s see how it exactly looks like in the following video.

This section is available in Master Addons template library for free. You can easily import this within your webpage if you are a Master Addons – Elementor Page builder addon plugin user. 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

Check how to install and active Master Addons Plugin

Create a page or post and edit it using elementor. You will see Master Addons Template library icon. 

Click on the MA Tempalte library and wait a few seconds to load the data. You will see “Ready Page” and “Sections”. Click on sections tab and wait a few seconds. Now you will see the “Moving Background image animation”. 

Now click on the zoom icon to preview it. Then you will see a insert button. Click on this “insert” button to get this template in one click. After that you are free to edit the content.

This is how your section will look like. I am using WordPress default theme in my localhost. Just click on title or paragraph or social to edit content. 

If you want to add your own image and overlay effect then you should move to the changing BG and Overlay Image section now.

Moving Background Image animation tutorial

Short answer: build a one-column Elementor section set to “Fit to screen”, add a spacer with the CSS ID bg above your content and a second spacer with the ID overlay below it, then paste the CSS animation code below into an HTML widget and swap in your own image URLs. You need three assets — a wide background image, a PNG overlay and an SVG overlay — and the whole build takes about ten minutes on the free Elementor page builder.

Assets You need: 

1. A image having 1500 by 500 pixels Dimensions
2. A PNG overlay Image
3. A SVG overlay Image

Now add a one column structure and make it’s height “Fit to screen”. 

Just add your content now. I am going to share the demo content typography information here. 

Title (Used Elementor default heading element): Font Family: Source Sans Pro, Font size: 120px, Font weight: 900, Line height: 140, Letter spacing: -5, Color: Black

Text (Used Elementor default Text Editor Element): Font Family: Source Sans Pro, Font size: 30px, Font weight: 400, Line height: 40, Color: Black

Social (Used Elementor Default Social Element): Shape: Circle, Alignment: Center, Color: Custom, Primary Black: rgba(175,175,175,0), Secondary Color: Black, Size: 40, Space: 30, Border Type: Solid, Border Width: 2, Border Color: Black

Take a look at the following GIF animation and you will understand how to apply all of these property within your elementor element. 

Put z-index=1 to each element using the advanced tab. Just click on each element and navigate to Advanced tab. Check the following image. 

(If you miss this then you will face problem on editing elements content after adding moving background image CSS code. You have to use Elementor Navigator system to edit content if you don’t put z-index here.)

Now Add two spacer. One is top of the title and another is bottom of the social media icon. 

Put “BG” as ID in the top spacer. And put “overlay” as ID in the bottom spacer. 

Adding BG ID in top spacer

Adding overlay ID in bottom spacer

Add the “HTML” element under the social media icon or at the top of second spacer. 

Changing BG Image and Overlay Image link

Do you remember about our Moving BG image animation assets? Now it’s time to upload them in your website. Upload the background image, PNG overlay, and SVG overlay image. Then copy these 3 links and list down in your code editor or notepad. 

Copy the following code in your code editor. And change the background image link, PNG and SVG image overlay link. I have added two screenshot where you can find easily what links you should change. 

Click on each image to see the high resolution version. 

Change Background Image URL

Change Overlay Images URL

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

Now copy your edited code with Bg and Overlay images. Then paste it in the HTML element. You will see the result instantly. If you know how to work with CSS then you can customize the animation too.

Let’s change the text color’s and social media color’s into white to see the exact look like I have showed to you.

That’s all about creating Moving Background Image Animation using elementor page builder plugin. You can style your content by using our Master Addon’s plugin too. This will be fixed background for your page. If you want to set moving background for a section then just change the position to “absolute“. 

Feel free to comment here if you face any problem. I will guide you to customize your moving BG image animation.

Frequently Asked Questions