Comment superposer une image de fond dans un texte en CSS

par Jean - netologiste.com | Mis à jour le 27 Oct 2023 | Divi, WordPress | 0 commentaires

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 :

regardez la 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.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Besoin d’aide personnalisée ?

Recevez de l’aide directement sur votre site : lors d’un appel Zoom avec partage d’écran, je travaillerais avec vous sur votre site.

Pratiquez à votre rythme avec les formations en ligne

Formation WordPress

Apprendre WordPress

Comprenez WordPress de A à Z : formation complète en vidéo pour tout apprendre de WordPress.

Formation Découvrir Divi

Découvrir Divi

Créez votre site Web sans faire de code grâce au constructeur visuel Divi.

Formation Mieux utiliser Divi

Mieux utiliser Divi

Mon expérience après avoir aidé des dizaines d'entreprises à améliorer leur site Web Divi.

Formation Hébergement

Guide hébergement

Un hébergement Web avec votre installation de WordPress dès aujourd’hui.

Formation Divi Intégration Web

Divi intégration Web

Création d'une page Web complexe à partir d'une maquette graphique.

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