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 :

section avec fondu "multiplié"

Mais si l’option n’est plus appliquée, le titre est complètement illisible :

section sans fondu "multiplié"

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 :

/* DIVI OVERLAY FALLBACK IE / EDGE */
// detect if background-blend-mode property supported
var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;
if(typeof supportsBackgroundBlendMode === "undefined") {
     // select all element with background set
    var elementsWithBackground = document.querySelectorAll('.et_pb_with_background');

    if( elementsWithBackground ) {
        // transform as array for loop
        elementsWithBackground = Array.prototype.slice.call(elementsWithBackground);
        // loop on each element with background
        elementsWithBackground.forEach( function( element ) {
            var blendMode = window.getComputedStyle(element).backgroundBlendMode;

            if( typeof blendMode === 'undefined' ) {
                // create empty element
                var overlayDiv = document.createElement('div');
                // give it the overlayDiv class (see CSS)
                overlayDiv.className = "overlayDiv";
                // select the first child of the section
                var theFirstChild = element.firstChild;
                // insert overlay div just before the first child
                element.insertBefore(overlayDiv, theFirstChild);
                // set overlay div background color from the initial overlay backgroun color
                overlayDiv.style.backgroundColor = window.getComputedStyle(element).backgroundColor;
            }
        });
    }
}

Et cette règle CSS à placer dans votre fichier de style :

/* IE / EDGE */
.overlayDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

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.

Cet article a 10 commentaires

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

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

  2. 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 ?

    1. 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' );

  3. Super Merci pour votre aide ! Je suis débutant en la matière …

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

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

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

    1. 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 ?

  6. 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..)

Laisser un commentaire

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

ut massa Praesent sit sed dolor ante. amet, commodo commodo