This tutorial was fully rewritten in March 2024.
In this tutorial, I'm going to show you how you can easily have an Elementor background image show through text. We will be showing this Elementor Background Image in Text using some simple mix-blend-mode CSS, applied carefully to the right elements!
Here is what we will be creating:
Visit the template page directly (the small 1px line bug that you might see in the iframe isn't there when the page is visited normally)
Features:
- Works with Elementor Free
- Works with fixed backgrounds
- Works with video backgrounds
- Works with either white or black backgrounds (doesn't work with any other color! That's a limitation of this method)
Let's get started!
First, import the Elementor template for the image in text design
It's easier to start from my template. Simply import the template on your project, get it from below the iframe of the demo above.
Then, adjust as you wish with your own content
Delete everything that you don't need.
Keep the HTML element. It's at the bottom of the template. (Or if you prefer, copy paste the CSS in the HTML element somewhere else, and then delete it.)
Then, insert your own background image or background video.
The required class names
White background
For a see-through white background, the container that has the background color set to white also needs to class name:
<script> /* Please login to get the code * The code will be for the Awesome Looking Elementor Image In Text Design (2024) tutorial * Found at this URL https://element.how/elementor-image-in-text/ */ </script>
Black background
For a see-through black background, the container that has the background color set to black also needs to class name:
<script> /* Please login to get the code * The code will be for the Awesome Looking Elementor Image In Text Design (2024) tutorial * Found at this URL https://element.how/elementor-image-in-text/ */ </script>
Finally, enjoy your Elementor image in text design!
I hope you found this helpful.
Cheers!
6 Responses
This feature looks awesome! I am obviously doing something wrong though, as it's not working for me. Any ideas what I've missed? https://staging.rapidwebsites.com.au/qode/image/
Regards
Melanie
Hey Melanie!
The "backgroundtext" class name goes to the column, not the heading element!
Cheers
Maxime
Looks very nice!
However, it does not seem to work with the new Containers in Elementor... Any advice, please?
Cheers
Steffen
Hey Steffen!
I updated the tutorial, it now works with the containers and you can even download the template!
Cheers!
Does video background work with mobile?
Yes it does! Keep in mind the normal limitations of mobile videos though.