If you use Divi regularly, you may have realised that adding a gradient overlay AND adding a parallax effect are not compatible on the background images of your Divi sections. In other words: a gradient overlay on a parallax image is impossible with Divi!
I am well aware that all these words can be frightening because it is a very particular jargon which mixes English terms and web jargon.
But don't worry, we're going to cover all of this in detail, and as a bonus, we're going to see how to make this possible with a simple line of CSS code (ideal for beginners)!
Here is a video that explains what you can do with the content of this article:
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - What is an overlay or a gradient overlay?
In WebDesign, the term "overlay" refers to an "overlay".
The term "overlay" is often used when talking about an image. It is in fact an overlay of colour that is placed on top of an image. This colour is often applied with an opacity in order to preserve the visual of the image. the background image.
A gradient-overlay is therefore an overlay of colour on top of an image.
The overlays are often proposed to improve the design of a clickable image.
At the UX (user experience) level, this allows the user to understand that the image is clickable.
2 - What is a "parallax effect"?
This is not the first time that the parallax term on this blog!
The parallax effect is a fairly common practice in web design. The visual effect is often very successful and it gives depth to your Divi layouts.
Thanks to parallax, you can fix your background images during scrolling (CSS parallax), or you can desynchronise the scrolling of the background with the scrolling of the upper plane (real parallax)... We will see all this in an explanatory video a little further down.
However, in a previous article we saw that the parallax effect was fickle in the mobile version... The same goes for this article: it will cause us some problems... which we will solve in no time!
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE
3 - Divi options: impossible to combine the two!
Yes, if adding a gradient to a parallax image was natively possible within Divi, this article would not exist.
But this is not the case!
Sometimes, we notice bugs or inconsistencies within our favorite WordPress tools. We think they will be fixed quickly... But no!
Don't tell me that Elegant Themes doesn't know about this problem of gradient on a parallax image!
In short, since nothing is done... I propose a simple, quick and effective solution!
This video explains the procedure for allowing a gradient on a parallax image:
4 - Allowing a gradient on a parallax image: explanations!
As you could see in the previous video, adding a gradient on a parallax image is really not complicated. Especially since Divi provides us with all the tools to do it quickly and easily!
Let's look at these steps in more detail:
First, you need to edit the settings of the section (or module) that contains your background image:
Just click on the gear icon... A popup will open:
- In the Contenttab > Background
- Select the background image icon and import your image from the media library or from your local drive.
- Do not check the "use parallax effect" option under any circumstances.
- Always on the Content > Background tab.
- This time select the gradient icon.
- Choose the two colours that will make up your gradient. For my example, I chose a transparent mauve and a solid yellow.
- Define the options of your gradient: linear or radial. Then set the start and end position. This will have an impact on the design of the gradient.
- Don't forget to check the "title background image" option. This will place the gradient above the background image (as explained in the video).
Finally, you will need to add some CSS to get a parallax effect on your image with a gradient overlay:
- Still in the section settings, go to the Advanced tab
- In "main element", enter this line of CSS code:
This line of code is sufficient to obtain the desired effect but you could add other parameters if the result is not suitable, for example :
background-repeat: no-repeat; background-attachment: fixed; background-position: top center; background-size: cover;
- Do not forget to save your changes.
If you want to know more about the CSS property "background", I advise you to read this article which explains this property and its values in detail. This will help you understand what CSS calls you can make to manage your background images.
5 - A gradient on a parallax image: a matter of taste... or of WebDesign!
If you read this blog regularly, you must have realised that I am a "die-hard fan" of scrolling and parallax hi hi hi!
- Footer that reveals itself on scroll
- Scroll in a mockup
- Image that scrolls when the mouse hovers
- Menu that is fixed on scroll
- Footer menu
Is it a matter of taste? Maybe it's a story of web design or a story of trend?
Still, a website using neither parallax nor scroll dynamics is so... boring?
Yes and no...
It all depends on what type of site we are on. For example, the tax site or the CNIL site do not use this type of design... Why? These are institutional sites that can't afford it... But for all other site themes, why not?
Gradients and parallax backgrounds bring dynamism, identity and emotion...
What about you? What do you think of it?
Discover many more tips and resources directly on the Elegantthemes blog.