Comment superposer une image de fond dans un texte en CSS

par | 19 Mai 2021 | Divi, WordPress | 0 commentaires

Accueil » Divi » Comment superposer une image de fond dans un texte en CSS
partagez-cet-article

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 :

Exemple d'image de fond dans un 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 :
sélection du titre
  • Dans la fenêtre paramètres du module, je clique dans l’onglet avancé :
onglet avancé de Divi
  • 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 …) :
classe CSS dans un module Divi

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 :

Menu WordPress : Apparence > Personnaliser

Je clique sur l’onglet CSS additionnel, c’est ici que j’ajoute mes instructions CSS :

CSS additionnel

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.

ajout du code CSS

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 :
menu medias WordPress > ajouter
  • Ici je dépose mon image :
téléverser une image
  • Ensuite je clique sur modifier :
lien pour modifier l'image
  • Je retrouve l’adresse de mon image dans le champ URL du fichier :
copie de l'URL de l'image
  • 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;
}

insertion de l'URL de l'image

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.

Besoin d'aide personnalisée ?

Recevez de l’aide directement sur votre site : lors d’un appel Zoom avec partage d’écran, nous travaillerons ensemble sur votre site

0 commentaires

Soumettre un commentaire

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

guide-hebergement-wordpress-2019-couv

"Obtenir son hébergement Web et WordPress"

Un hébergement Web avec votre propre installation de WordPress pour commencer à travailler sur votre site aujourd’hui.

formation WordPress

Formation : "WordPress"

Comprenez WordPress de A à Z : ma formation la plus complète, 175 vidéos détaillées sur le fonctionnement de WordPress !

formation-1-decouvrir-divi

Formation : "Découvrir Divi"

Cette première formation est une bonne introduction à Divi : elle vous permettra de comprendre comment créer et mettre en page des pages sur votre site Internet.

formation2-integration-web-wordpress

Formation : "Divi intégration Web"

Création d'une page Web complexe à partir d'une maquette graphique : l'intégration Web avec Divi et WordPress n'aura plus de secrets pour vous !

Obtenez ma formation Divi gratuitement

Recevez ma formation Divi gratuite avec des astuces pour vous simplifier le quotidien.

Vous allez recevoir un email à l'adresse que vous avez indiqué.