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. 

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. 

Moving Background Image animation in one click

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. 

Master Addons Template Library

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”. 

Master Addons sections Library

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.

Insert section from MA Template Library

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. 

Edit content in Moving BG image section

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

Assets You need: 

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

Download all 3 assets which I have used in the demo from the following download button. 

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

Adding Fit to Screen structure in Elementor

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. 

Elements typo style for moving BG animation

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.)

Adding z index to elementor element

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. 

Adding HTML element inside Elementor Page builder

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.

Master Addons Moving BG image Preview

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.

Change text and social media color into white

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.

Comments

Jon

Hi,

Is there any way to put the Moving background image animation within a specific section? I see you have mentioned about the position in the last paragraph of your post. But it's a little bit complex for me to understand where I need to change this.

Thank you

royjemee

Hello,

Thanks for your question. Just search for "position: fixed;" code inside the CSS code. Change the position to "absolute" from only #BG ID. You will get this at the beginning of your code. Or take a look at the background image URL screenshot. You will see Position property under Background.

Thank You

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms