Gradient overlay on a parallax background in a Divi section: it's possible!

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

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.

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

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:

Ouvrir les réglages section Divi
Open the settings for 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 Contenttab > Background
  2. Select the background image icon and import your image from the media library or from your local drive.
  3. Do not check the "use parallax effect" option 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 transparent mauve and a solid yellow.
  4. 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.
  5. Don't forget to check the "title background image" option. This will place 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 a gradient overlay:

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


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.

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

1,081 words


You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

27 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

  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 !


    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 :
    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 :

  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….

  12. Aumont David

    Bonjour Lycia,

    Un grand merci pour cet article tutoriel car il est vrai que c’était vraiment un problème.

    Et votre site est une mine d’information pour les utilisateurs DIVI

    Encore merci.


  13. Lycia Diaz

    Merci David

  14. 7hil

    Bonsoir Lycia, comme d’habitude un tuto au top !

  15. Lycia Diaz


  16. Chris Tierney

    Merci Lycia!

    Bonne astuce – J’aime normalement placer mon CSS dans la feuille de style mais cela fonctionne très bien!

    Merci Merci Merci!

  17. Céline Lassalle


    Merci pour ce tuto.

    Je rencontre également un souci sur affichage iPad, iPhone. J’ai mis un dégradé noir au dessus d’une image de fond et utilisé background-attachment : fixed pour avoir un effet parallaxe. Malheureusement sur iPhone et iPad, le fond de cette section est noir.

    J’ai inséré le script présent sur le second tutoriel et ça n’a pas eu d’impact.

    Depuis la rédaction de cet article, quelqu’un a-t’il trouvé une solution pour ce souci?

    Merci encore et bonne journée,


  18. Lycia Diaz

    Salut Celine. Ça doit fonctionner, il faut vérifier si le code que tu as inséré est bon, quelque fois ça peut mal s’écrire en faisant un copié-collé

  19. Fileri


    Magnifique tuto comme d’habitude, mais pour moi, cela ne fonctionne pas. J’ai vérifié et je n’ai fait aucune erreur.
    Est ce qu’entre temps, Divi a modifié quelque chose qui rend la manip’ inopérante ?

    Je ne sais pas mais en tout cas l’overlay dégradé n’apparait pas…

  20. Lycia Diaz

    Fileri, ça doit marcher, j’en ai fait un il n’y a pas longtemps. Divi n’a rien changé

  21. Jean-Marc

    Bonjour Lycia et merci pour ta réactivité.

    J’ai de nouveau vérifié. Je ne comprend pas. Regardes par toi-même :
    Il s’agit de la section entre le mur d’images et la section Instagram.
    Quand je regardes via la console, je vois pourtant bien la prise en compte du CSS :

    Là, je sèche…

  22. Jean-Marc

    Bon… Je reviens un peu honteux…

    Honteux de ne pas avoir lu SCUPULEUSEMENT ce tuto et de t’avoir fait perdre un temps précieux. J’étais persuadé qu’il fallait activer le parallaxe vu qu’on veut un dégradé en parallaxe.

    Mais je n’ai pas bien lu. Il ne faut SURTOUT PAS l’activer, même s’il est encadré dans ce tuto (voir le point 3 ci-dessus). Et le résultat qu’on obtient en back office, quand on suit pas à pas le tuto (déformation de l’image de fond), m’a tellement dérouté que je n’ai pas vérifié le rendu en front office qui, lui, est parfait.

    Moralité : un tuto se lit avec concentration et vérifiez bien le rendu en front office avant de conclure que la manip ne fonctionne pas.

    Merci Lycia;)

  23. Lycia Diaz

    Merci Jean Marc

  24. Jean-Marc

    Bonjour Lycia,

    Belle année à toi !;)

    Me revoilà de nouveau. .. Je m’aperçois que la manip ne fonctionne ni sur tablette, ni sur smartphone Apple. Est ce que tu rencontres le même problème ?

    J’ai mis en place ce qui est indiqué içi :
    Mais rien n’y fait. La manip fonctionne sur un Mac, un Pc, peu importe les navigateurs. Mais dès qu’on est sur une tablette Apple ou iPhone, ça ne fonctionne plus, et ce, avec n’importe quels navigateurs.

    Voici le site le question :

    A très vite;)

  25. Lycia Diaz

    Hello Jean Marc ! As-tu suivi le tutoriel à la lettre ? Car ça marche et c’est justement le but de ce tuto 😉 peut-être un souci de cache ou de classe CSS ?

  26. Jean-Marc

    Bonjour Lycia,

    Me revoilà de nouveau avec toujours le même problème non résolu.

    Je précise que je ne fais pas d’erreur de code puisque l’effet fonctionne parfaitement sur mon Realme 7pro qui tourne sous Android. Le problème ne se pose QUE sur iPad et iPhone. Aucun problème sur iMac, macbook, pc, tablettes et smartphone sous Android.

    Je suis allée sur le site du créateur du code qui est dans ce tuto :
    Il a mis un exemple en bas de sa page :
    Là, ça fonctionne. Mal parce que ca saccade quand on scroll, mais l’effet parallaxe est bien là.

    Pourtant, je vois bien dans les commentaires que beaucoup d’autres personnes rencontrent le même problème que moi.
    Mais malgré des heures de recherche, je ne vois pas d’où vient le problème…

  27. Lycia Diaz

    Ah tu m’en vois désolée. Il faudrait investiguer plus profondément. Car dans mon tuto, ça marchait bien. Mais je n’ai pas réessayé.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

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

New Divi training!

55 videos to master the Divi Visual Builder like a pro: ⏱ 3h30 of theory + 👩🏻💻 6h00 of practical application + 🤝 30min. of individual coaching in visio.

(CPF eligible training)

Pin It on Pinterest

Share This