Si vous utilisez le Divi Builder vous connaissez sûrement l’option « Fondu de l’image de fond » (ou « Image blend mode » en anglais) qui permet d’appliquer à un élément (une section par exemple) une couleur de fond en superposition de l’image de fond.
Je l’utilise également pour des projets clients, et elle permet de faire de jolis effets sur des images sans forcément passer par l’étape Photoshop, bien pratique.
Mais avez-vous remarqué que cette option ne s’affiche pas sur les navigateurs Edge et Internet Explorer ?
Outre le fait que l’on perd un élément de style, cela cause surtout de gros problèmes d’accessibilités si des éléments de texte sont placés sur la section.
Par exemple ici, avec un fond noir à 80% d’opacité et le fondu réglé sur « multiplié » mon titre est lisible :
Mais si l’option n’est plus appliquée, le titre est complètement illisible :
Et c’est exactement ce qui s’affiche sur les navigateurs Edge et Internet Explorer.
En effet le Divi Builder utilise la propriété CSS background-blend-mode
, qui n’est pas supportée par ces deux navigateurs. Résultat, seul le background-image
est affiché.
Je n’ai pas trouvé de solutions alternatives sur les Internet, aussi j’ai créé un petit bout de JavaScript qui, sur les navigateurs ne supportant pas la propriété background-blend-mode
, va créer un élément HTML supplémentaire et lui appliquer la couleur de fond sélectionnée dans les options du builder.
Le résultat n’est pas exactement le même que celui rendu sur Chrome ou Firefox, mais cela permet de conserver la lisibilité des éléments.
Voici le code JavaScript a insérer dans votre thème enfant :
[pastacode lang= »javascript » manual= »%2F*%20DIVI%20OVERLAY%20FALLBACK%20IE%20%2F%20EDGE%20*%2F%0A%2F%2F%20detect%20if%20background-blend-mode%20property%20supported%0Avar%20supportsBackgroundBlendMode%20%3D%20window.getComputedStyle(document.body).backgroundBlendMode%3B%0Aif(typeof%20supportsBackgroundBlendMode%20%3D%3D%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%2F%2F%20select%20all%20element%20with%20background%20set%0A%20%20%20%20var%20elementsWithBackground%20%3D%20document.querySelectorAll(‘.et_pb_with_background’)%3B%0A%0A%20%20%20%20if(%20elementsWithBackground%20)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20transform%20as%20array%20for%20loop%0A%20%20%20%20%20%20%20%20elementsWithBackground%20%3D%20Array.prototype.slice.call(elementsWithBackground)%3B%0A%20%20%20%20%20%20%20%20%2F%2F%20loop%20on%20each%20element%20with%20background%0A%20%20%20%20%20%20%20%20elementsWithBackground.forEach(%20function(%20element%20)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20blendMode%20%3D%20window.getComputedStyle(element).backgroundBlendMode%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if(%20typeof%20blendMode%20%3D%3D%3D%20’undefined’%20)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20create%20empty%20element%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20overlayDiv%20%3D%20document.createElement(‘div’)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20give%20it%20the%20overlayDiv%20class%20(see%20CSS)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20overlayDiv.className%20%3D%20%22overlayDiv%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20select%20the%20first%20child%20of%20the%20section%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20theFirstChild%20%3D%20element.firstChild%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20insert%20overlay%20div%20just%20before%20the%20first%20child%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20element.insertBefore(overlayDiv%2C%20theFirstChild)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20set%20overlay%20div%20background%20color%20from%20the%20initial%20overlay%20backgroun%20color%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20overlayDiv.style.backgroundColor%20%3D%20window.getComputedStyle(element).backgroundColor%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%7D » message= » » highlight= » » provider= »manual »/]
Et cette règle CSS à placer dans votre fichier de style :
[pastacode lang= »css » manual= »%2F*%20IE%20%2F%20EDGE%20*%2F%0A.overlayDiv%20%7B%0A%20%20position%3A%20absolute%3B%0A%20%20width%3A%20100%25%3B%0A%20%20height%3A%20100%25%3B%0A%20%20top%3A%200%3B%0A%20%20left%3A%200%3B%0A%7D » message= » » highlight= » » provider= »manual »/]
N’hésitez pas à me faire vos retours en commentaire, est-ce que la solution fonctionne chez vous ?
Crédit photo de couverture : Cafepampas sur Pixabay.
11 réponses à “Alternative IE / Edge aux overlays du Divi Builder”
Bonjour,
Merci pour votre article. Je cherche également une solution pour ce problème.
Cependant en appliquant votre code…Je perd l’image de fond… Est-ce normal?
Est-ce qu’il ne serait pas possible de changer l’opacité ?
Voici un exemple dans le titre (nos services / INTÉGRATION – DÉVELOPPEMENT):
https://www.inneasoft.com/fr/services/
Cordialement,
Marc
Bonjour Marc,
normalement l’élément ajouté en JavaScript reprend le style appliqué par Divi, et donc le style défini dans le Divi Builder. Si vous y appliquez une opacité à 50%, il reprendra donc ce style.
Bonjour,
Super article. Le script Js est bien à placer dans le fichier enfant functions.php ? Car lorsque je le met, j’ai une parse error sur la 1ere ligne du script et mon site ne s’affiche plus du tout. Le reste est bien placé dans le fichier style.css du répertoire enfant. Une idée ?
Bonjour,
non, le script JavaScript est a insérer dans un fichier JavaScript (nom-du-fichier.js), ce fichier est à placer dans le thème enfant.
Pour charger le script il faut utiliser l’action
wp_enqueue_scripts
dans le fichier functions.php du thème enfant, par exemple :/**
* Proper way to enqueue scripts and styles.
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_script( 'nom-du-fichier', get_stylesheet_directory_uri() . 'nom-du-fichier.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Super Merci pour votre aide ! Je suis débutant en la matière …
Re,
Je viens de tester et apparemment le ‘1.0.0’ pose problème. Toujours une parse error. Si j’enleve les ‘ ‘ de chaque coté et le dernier .0 de 1.0.0 le site se raffiche mais sans l’overlay tout de même.
Une idée ? Voici ci dessous mon code inclus dans functions.php sachant que j’ai nommé le fichier js dans mon répertoire enfant (intexplorer.js)
function wpdocs_theme_name_scripts() {
wp_enqueue_script( ‘intexplorer’, get_stylesheet_directory_uri() . ‘intexplorer.js’, array(), 1.0 , true );
}
add_action( ‘wp_enqueue_scripts’, ‘wpdocs_theme_name_scripts’ );
Merci
Les single quotes sont visiblement transformées ici, ce qui créé l’erreur.
Voici le code en ligne, avec des singles quotes correctes : https://pastebin.com/1b0un4ir
Merci le code ne fait plus d’erreur cependant aucun changement. Dans les paramètres divi ‘en tete plein ecran>contenu’ mon image de fond est avec l’option fondu lumière tamisé. Il n’est pas possible de réglé l’opacité à 50%. En effet il est possible de la régler que dans l’onglet style où on peut régler sépia etc… mais ce réglage n’est pas pour l’image background il est pour les images qui sont intégrées en plus dans la section. Si vous avez une idée je suis preneur.. Merci encore bonne fin de journée.
Bonjour,
Comme expliqué au début de mon article le script est prévu pour le paramètre « Fondu de l’image de fond » (ou « Image blend mode » en anglais) qui permet d’appliquer à un élément (une section par exemple) une couleur de fond en superposition de l’image de fond.
Je ne sais pas si on parle du même réglage.
Avez-vous une URL en ligne sur laquelle votre travail est visible ?
Bonjour,
Je suis dans la section je choisi une couleur de background , une image de fond , ensuite dans fondu de l’image de fond je met lumière tamisé.
Mon site est en local malheureusement.
Impossible de régler l’opacité dans fondu de l’image de fond il n’y a que une dizaine de proposition sous forme de liste ( tamisé , luminosité , densité , superposition etc..)
Très bonne idée, mais deux problèmes se posent.
1. Cela ne fonctionne pas avec le module Slider… Qui lui ne rajoute pas la classe et_pb_with_background (contournement possible en rajoutant une condition avec la classe et_pb_slide mais ce n’est pas propre)
2. Cela ne fonctionne pas avec un background en mode linear ou radial. En effet, DIVI le place dans la propriété background-image et non dans background-color.
Exemple background-image: url(« https://… »), linear-gradient(90deg, rgb(0, 0, 0) 45%, rgba(0, 0, 0, 0) 80%);