Home » Tutorials » 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.
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.
Assets You need:
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”.
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.
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.
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
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
Finest Creation by Jewel Theme
© 2021 - Master Addons| All rights reserved
Plugin Installed Email
Password
Remember Me