Voyons comment incruster une image à l’intérieur d’un texte, superposer une image de fond à un texte, dans un site web.
C’est quelque chose que je ne fais pas souvent, et qu’on ne voit pas énormément sur le Web, mais qui reste très facile à réaliser avec simplement quelques lignes de CSS.
Le résultat peut être très satisfaisant, si toutefois on utilise cette technique avec parcimonie.
Voici à quoi cela va ressembler : l’image sera fusionnée avec le texte, l’image sera utilisée comme image de fond du texte :
Je vais vous montrer comment faire cela avec WordPress et le thème Divi, mais ça fonctionne avec n’importe quel type de site HTML/CSS : que vous utilisiez un autre CMS comme Joomla, Drupal ou Prestashop, ou bien WordPress avec un autre thème que Divi, comme Astra, OceanWP, Hello, Avada, … ou que votre site soit fait directement en code PHP, Python … peu importe, ça va marcher avec tous les types de sites, puisqu’on va utiliser du CSS.
En effet, pour incruster une image de fond dans un texte, on va simplement lui donner des instructions en CSS que l’on va appliquer au sélecteur de notre texte, avec l’adresse de l’image qu’on veut insérer dans le texte.
Voici les explications en vidéo :
Décomposons les étapes et notre méthodologie pour obtenir cet effet d’image de fond dans le titre et texte :
1. Trouver le sélecteur de notre texte
On veut appliquer une classe CSS à l’élément qui contient le texte. Quel que soit votre type de site, thème WordPress, ou Page Builder, vous devriez avoir un moyen d’appliquer une classe à un élément HTML ou un module.
Voici comment appliquer une classe CSS à un module Divi, et si vous ne savez pas faire cela avec votre site qui utilise autre chose que Divi, référez-vous à la documentation de votre thème ou de votre CMS.
Pour Divi :
- Je sélectionne mon module texte :
- Dans la fenêtre paramètres du module, je clique dans l’onglet avancé :
- Dans le champ « Classe CSS », j’écris le nom de ma classe CSS. Ici j’ai appelé ma classe image_dans_texte_demo_1, mais vous pouvez mettre ce que vous voulez comme nom de classe (sans espaces, sans accents …) :
On enregistre le module, puis on sauvegarde la page.
2. Où / comment mettre du CSS dans notre site
Maintenant que la classe CSS est liée à notre titre, je vais aller écrire le code CSS correspondant.
Ajouter du CSS à votre site peut être fait dans le fichier .css de votre thème enfant ou à d’autres endroits : voir Comment ajouter du CSS à un site Divi.
Ici, je vais me rendre dans Apparence > Personnaliser :
Je clique sur l’onglet CSS additionnel, c’est ici que j’ajoute mes instructions CSS :
3. Instructions CSS
- J’ajoute ces instructions dans le CSS additionnel :
.image_dans_texte_demo_1 h2 {
background: center / cover url ("https://www.monsite.com/monimage.jpg");
background-clip: texte;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
En remplaçant https://www.monsite.com/monimage.jpg par l’URL de votre image.
Détails des instructions CSS que j’applique à la classe
Background: consiste à déclarer un fond, qu’on va centrer et étendre sur toute la largeur du conteneur avec center et cover.
background: center / cover url ("https://www.monsite.com/monimage.jpg");
background-clip: permet d’insérer l’image de fond dans le texte.
background-clip: text;
-webkit-background-clip: permet de dire qu’il faut appliquer cette instruction aux navigateurs webkit.
-webkit-background-clip: text;
-webkit-text-fill-color: cela va enlever la couleur du texte pour voir l’image dans le texte.
-webkit-text-fill-color: transparent;
4. Obtenir l’URL de l’image
- Je prépare l’image que je veux mettre en fond du texte
- Je l’ajoute dans mon site : pour WordPress, je me rend dans Médias > Ajouter :
- Ici je dépose mon image :
- Ensuite je clique sur modifier :
- Je retrouve l’adresse de mon image dans le champ URL du fichier :
- Je retourne dans le CSS additionnel et j’insère l’adresse de mon image entre les guillemets comme ceci.
.image_dans_texte_demo_1 h2 {
background: center / cover url (“http://localhost/formation-divi/wp-content/uploads/2021/05/7.jpg”);
background-clip: texte;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
L’adresse de votre image devrait ressembler à quelque chose comme ça :
https://www.votresite.com/wp-content/uploads/2021/05/nom_image.jpg
Si vous souhaitez ajouter un autre fond à un autre texte, la méthode reste la même. Pensez seulement à ajouter une nouvelle classe à votre titre ou texte et changer l’adresse de l’image dans votre code CSS.
0 commentaires