If you regularly use Divi, you may have realized 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 on a parallax image is impossible with Divi!
I am well aware that all these words can be scary because it is a very particular jargon that mixes English terms and web jargon.
But don't worry, we're going to go into all this in detail, and as a bonus, we're going to see how to make it possible with a single line of CSS code (ideal for beginners)!
Here is a video that explains what you can achieve with the content of this article:
Advertisement: This article contains affiliate links that you will easily recognize. 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 referring to an image. It is actually a color overlay that is placed over an image. This colour is often applied with an opacity in order to keep the visual of the background image.
A "gradient-overlay" is therefore a gradient color overlay over an image.
The overlays are often proposed to improve the design of a clickable image.
At the UX level (user experience) this allows the user to understand that the image is clickable.
2 - What is a "parallax effect"?
This is not the first time that we have addressed the parallax term on this blog!
The parallax effect is a fairly common practice in webdesign. The visual rendering is often very successful and this gives depth to your Divi layouts.
Thanks to parallax, you will be able to fix your background images when scrolling (CSS parallax), or you will be able to desynchronize the scroll of the background with the scroll of the upper plane (real parallax). We will see all this in an explanatory video a little below.
However, we saw in a previous article that the parallax effect was capricious in the mobile version...... Ditto for this article: it will pose us some problems... that we will solve in 2 times 3 movements!
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 on a parallax image was natively feasible within Divi, this article would not exist.
But it's not!
Sometimes we notice bugs or inconsistencies within our favorite WordPress tools. We think they're going to be fixed soon... But no!
Don't tell me that Elegant Themes doesn't know about this problem of gradation on a parallax image!
In short, since nothing is done... I propose a simple, fast and effective solution!
This video explains the whole procedure to allow 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 we need to get there simply and quickly!
Let's go over these few steps in detail:
First, you need to edit the parameters of the section (or module) that contains your background image :
Just click on the gear icon... A popup will open :
- In the Content tab > Background
- Select the background image icon and import your image from the Media Library or from your local disk.
- Do not check the option "use parallax" 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 clear purple and a solid yellow.
- Define the options of your gradient: linear or radial. Then define the start and end position. This will have an impact on the gradient design.
- Don't forget to check the "title background image" option. This places 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 an overlay gradient:
- Still in the section settings, go to the Advanced tab
- In "main element", enter this line of CSS code:
This line of code is enough to get 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;
- Don't forget to save your changes.
If you want to know more about the CSS "background" property, I advise you to read this article which explains this property and its values in detail. This will allow you to understand what CSS calls you can make to manage your background images.
5 - A gradient on a parallax image: a matter of taste... or WebDesign!
If you read this blog regularly, you must have understood that I'm an "unconditional fan" of scroll and parallax hi hi hi!
- Scrolling Footer
- Scroll into a mockup
- Image scrolling at mouse hover
- Menu that attaches to the scroll
- Fixed menu in footer
It's a matter of taste, you tell me? Maybe a webdesign story or a trend story?
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 the other site themes, why deprive yourself of it?
The gradients and parallax backgrounds bring dynamism, identity, emotion...
How about you? What do you think?
Discover many other tips and resources directly on Elegantthemes' blog.