Divi Theme Full Width ANIMATED Background Image

by | Jun 16, 2023 | Divi Theme, Web Design, Wordpress

Divi Theme Gallery Module Change Columns On Tablet And Mobile

Divi Theme Full Width ANIMATED Background Image

How to create an awesome animated background image using the Divi Theme. In this video we will be showing how to apply some CSS code to animate the background image behind the hero section. Today we will be demonstrating how to create this feature using the Divi Call To Action Module and some Custom CSS Code (Below).
So follow along with this video to see how to do this with your site.

In this video we will cover:

Adding A Divi Image Module.
Making A Full Width Row.
Hiding Overflow.
Adding A Divi Call To Action Module.
Adding A Divi Code Module.
Writing The Animation CSS Code.
Using A CSS Class Name.

Join us in this series of videos where we explore the fantastic effects you can achieve with the Divi theme. With its versatile modules and effects, you can create eye-catching visuals that enhance the look and user experience of your website.

When we talk about incorporating CSS animations in web design, we are referring to the use of Cascading Style Sheets (CSS) to create dynamic and visually appealing effects on websites. These animations have several benefits that enhance the user experience and make websites more engaging.

Firstly, CSS animations can capture the attention of visitors by creating visually captivating effects. These effects can be used to draw attention to important elements on the webpage, such as call-to-action buttons or key messages. By adding movement and visual interest, CSS animations make these elements stand out and become more noticeable.

CSS animations also serve to guide the user’s focus. They can be used to direct the user’s attention to specific areas or elements on the webpage. For example, an animation can be triggered when the user hovers over a menu item, indicating that it can be clicked and revealing additional information or sub-menus. By guiding the user’s focus, CSS animations enhance the overall usability of the website.

Another benefit of CSS animations is that they add a sense of interactivity to the user experience. When elements on a webpage respond to user actions with animations, it creates a more engaging and interactive environment. This interactivity can make the user feel more connected to the website and encourage them to explore further.

CSS animations can also be used to communicate information or tell a story in a more engaging and immersive way. By animating transitions between different states or revealing content gradually, designers can create a more interactive and memorable experience for users.

CSS animations are lightweight and can be easily controlled and optimized for performance. This means that they do not significantly impact the loading speed or overall performance of the website. By using CSS animations judiciously and optimizing them for performance, designers can ensure that the website remains smooth and responsive, providing a seamless browsing experience for users.

Incorporating CSS animations in web design adds a layer of sophistication, creativity, and user engagement to websites. They capture attention, guide focus, provide interactivity, communicate information effectively, and can be optimized for performance. By leveraging these benefits, designers can create more engaging and immersive user experiences on their websites.


/* Background Image Animation */

.anbgrd {
animation: scaleimage 30s infinite;

@keyframes scaleimage {
0% {transform:scale(1)}
50% {transform:scale(1.3)}
100% {transform:scale(1)}

Try out the Divi theme:

Divi Supreme Modules Pro Plugin 10% Off:

Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6

Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU

Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw

Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1


Why Divi?

Divi is a popular WordPress theme known for its ease of use and versatile design. It is a versatile theme that can be used for a variety of websites, including business, personal, and eCommerce stores.

The Divi Theme offers a wide range of customization options, allowing users to create a unique website that is tailored to their needs. The theme has a drag and drop page builder, which makes it easy to create custom layouts and pages. This feature makes it easy to customize the look and feel of your site without having to do any coding.

The Divi Theme also offers a variety of pre-made layouts and designs, making it easy to find something that meets your needs. It also has a library of modules, which are snippets of code that can be used to add functionality to your website. This makes it easy to add contact forms, social media buttons, and other features to your website quickly and easily.

The Divi Theme also comes with a wide range of customization options, allowing users to easily change the colors, fonts, and other elements on their website. It also has a wide range of plugins, which can be used to extend the functionality of the theme and add more features to your website.

The Divi Theme is also optimized for speed and performance, making sure that your website loads quickly and runs smoothly. It is also optimized for search engine optimization, making sure that your website is visible in search engine results.

The Divi Theme also comes with a wide range of support options, including video tutorials and a dedicated support forum. This makes it easy to get help if you have any questions or need assistance with the theme.

Overall, the Divi Theme is a great option for anyone looking to create a professional website quickly and easily. It is easy to use, versatile, and offers a wide range of customization options. It is also optimized for speed, performance, and search engine optimization, making sure that your website is visible in search engine results. With its powerful features and great support options, the Divi Theme is an excellent choice for
anyone looking to create a website.

Free Stock Photos

Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.

There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.

Free Stock Photos – Where to get an unlimited supply

Free Stock Photos – Where to get an unlimited supply

Have a great website design

It is essential to have a great website design nowadays as so many people tend to shop and find services online. It is also very important to have a responsive website design as almost 50% of today’s browsing is done on smartphones and tablets, I certainly use mine for browsing. If a customer navigates to your site and they have to pinch and zoom to be able to read and navigate, the chances are that they will move away to another site and you will almost certainly lose that customer.

A well-developed website can convey trust and credibility, making people to buy from you, or support you. Whether you are a professional looking for a job, or an expert in your industry: you can show that to the whole world by having a custom responsive website.

Be sure to check out our playlist page to find the help you need!

Latest YouTube Videos

Subscribe To Our YouTube Channel

4.5 million views on youtube

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder

Pin It on Pinterest

Share This