Superimposing a gradient on a parallax background in a Divi section: it's possible!

Updated on 20/03/2020 | Published on 17/01/2020 | 11 comments

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.

For example, it is quite common to see the highlight images of a blog article with an overlay on mouse-over and even an icon that appears.

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 :

Ouvrir les réglages section Divi
Open the settings in the Divi section

Just click on the gear icon... A popup will open :

Ajouter image de fond section Divi
Add background image Divi section
  1. In the Content tab > Background
  2. Select the background image icon and import your image from the Media Library or from your local disk.
  3. Do not check the option "use parallax" under any circumstances.
ajouter un dégradé sur un image Divi
Adding a gradient to a Divi background image
  1. Always on the Content > Background tab.
  2. This time select the gradient icon.
  3. Choose the two colours that will make up your gradient. For my example, I chose a clear purple and a solid yellow.
  4. 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.
  5. Don't forget to check the "title background image" option. This places the gradient above the background image (as explained in the video).
gradient + parallaxe Divi
CSS code to enable gradient overlay with Divi parallax effect

Finally, you will need to add some CSS to get a parallax effect on your image with an overlay gradient:

  1. Still in the section settings, go to the Advanced tab
  2. In "main element", enter this line of CSS code:
background-attachment: fixed;

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;
  1. 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!

Just remember:

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.

superposition de dégradé sur une image parallaxe Divi
dégradé sur une image parallaxe Divi
Gradient overlay on parallax background

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

Parallaxe sur mobile avec Divi : comment le rendre compatible ?

Parallax on mobile with Divi: how to make it compatible?

It's such a shame that parallax sections don't work on a Divi site in a mobile version! Parallax" or "background fixed" designs are so much fun... I have THE solution and it is so simple that even beginners can implement it on their site in only 2 clicks!

11 Commentaires

  1. Jean-Marc

    Hello Lycia,

    Super tips !

    * « si je dois continuer, tout simplement » -> ah oui carrément ;))

    Merci à toi ! @+ Jean-Marc

    PS : suis déjà abonné !

  2. Lycia Diaz

    Merci Jean Marc 🙂

  3. Jean-Luc Robert

    Salut Lycia
    Pour commencer j’aimerais te dire un grand merci pour ce tuto, j’en avais besoin.
    Ensuite te féliciter pour la vidéo, car je sais que ce n’est pas facile de s’enregistrer en face d’une caméra, c’est même un challenge, j’ai essayé juste comme ça pour m’amuser, et j’ai vite abandonné.
    Pourtant j’ai l’habitude de parler en face d’un public.
    Alors si tu continue, nous en profiterons et toi je pense que ça sera de plus en plus facile où en tout les cas tu prendra plus d’assurance et de plaisir.
    Voilà pour ce que j’en pense et surtout encore félicitation et merci.

  4. Lycia Diaz

    Merci Jean Luc 😉

  5. Donetti

    Bonjour Lycia,

    Merci pour ce post. Très simple. Très bien expliqué.

    Grâce à tes tutos, ma culture DIVI s’agrandit et donne des idées créatives intéressantes. Donc on continue ! ;oD

    Bonne journée
    JC

  6. Lycia Diaz

    Merci JC ! 😉

  7. LC

    Magnifique astuce ! Merci beaucoup, je suis tombé dessus par hasard en cherchant justement comment faire 🙂 Et toujours très bien expliqué, super !

  8. PAGNIER

    Bonjour Lycia,

    Merci pour ce tutoriel très intéressant mais j’ai un problème.

    Ça fonctionne parfaitement sur Mac, Pc windows et smartphones android mais sur l’iphone que j’utilise pas du tout.

    Je sais qu’on peut désactiver le parallaxe sur téléphone mais bon c’est dommage si tu as une solution je suis preneur.

    Merci beaucoup.

  9. Lycia Diaz

    Tu es sûr que ça marche pas sur iPhone ?
    Je crois que j’ai une soluce pour toi : https://astucesdivi.com/parallaxe-mobile-divi/
    Je suppose que tu dois coupler les deux tutos pour que ça fonctionne.

  10. Mathieu PAGNIER

    Re bonjour Lycia, non malheureusement ça ne fonctionne pas sur Apple mais parfaitement sur mon Android.

    J’ai testé aussi sur ton site et le problème est identique.

    Après je pense que c’est peut être la version de l’iphone c’est un 6s, peut être que ça marche mieux sur les modèles récents.

    J’ai essayé de cumuler avec le tutoriel sur la parallaxe mobile et le JS mais rien n’y fait.

    Si tu veux aller jeter un coup d’œil en cette période de confinement : https://mathieupagnier.com

  11. Mathieu PAGNIER

    Encore moi, du coup non le problème ne vient pas de la version de l’iphone, je viens de tester sur le 11 et ça ne fonctionne toujours pas malheureusement….

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This