In this tutorial you are going to learn how to randomize an Elementor background image set on a container or a section.
I was very careful to code it so that the default background image won't load at all. That way, the performance is optimal, or at least as optimal as can be when dealing with CSS background images.
Here is a demo. Click the reload icon in the top right to see the various background images.
Note that if you are looking for a random background image slideshow, I have a tutorial about that as well.
First, add this Elementor random background image code to your project
You will need to use the Code Snippets plugin, or your child theme functions.php file.
<script> /* Please login to get the code * The code will be for the Elementor Random Background Image (Optimized for Speed) tutorial * Found at this URL https://element.how/elementor-random-background-image/ */ </script>
Here is what it looks like in a Code Snippet:
Don't forget to active your code snippet by clicking on the top right button.
Then, let's setup your container or section
You will want a background image already present there. It's required so that the other settings are set; the background position and size in particular. You will probably want these to "center center" and "cover", respectively.
Then add the class name randomBGImage to your container or section.
Finally, add your images URL as attribute
Now, you will want to add a comma separated list as a data-images attribute.
It needs to be formatted that way:
data-images|image-url-1.jpeg,image-url-2.jpeg,image-url-3.jpeg
Note that it is all on the same line! No line breaks. In the Elementor editor, it will wrap:
That's perfectly fine.
Exclude from delay JS
In case you are using WP Rocket, or another optimization plugin with a similar delay JS feature, you will want to add randomBGImage to the exclusion list.
Same goes for styles, in case you are merging them. Exclude randomBGImage from merging.
Merging styles or JS files isn't recommended though. Learn more about this in my setting up WP Rocket tutorial, and learn how to get great performance in my get 90 page speed score on mobile tutorial.
Conclusion
Enjoy your new random background image setup!
Cheers!
8 Responses
Does this also work with videos?
Hey Christine!
No sorry it doesn't as it is. The code would need to be adjusted to work for videos.
Hi there, this code repeats the image in the background, is there any way I can fill the container/not repeat it? Thanks!
Greetings!
Simply set the background image to no repeat in the Elementor editor!
Cheers!
Hey. This function throws a critical error in the hello-child-theme.
Your PHP code changes were not applied due to an error on line 54 of file wp-content/themes/hello-theme-child-master/functions.php. Please fix and try saving again.
syntax error, unexpected identifier "add_action"
add_action('wp_footer', function(){
Hey Tim!
Thanks for letting me know about this. It looks like an error from the PHP validator of WP, as the code was working fine. Anyhow, I adjusted the code to avoid this false flag.
Cheers!
Error at: add_action('wp_footer', function(){
Hey Alan!
You need to use either the Code Snippets plugin or your child theme functions.php, as I mention in the tutorial.
Cheers!