Comment superposer une image de fond dans un texte en CSS

Mis à jour le 25 octobre 2026

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: text;
    -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 rends 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("https://www.votresite.com/wp-content/uploads/2021/05/nom_image.jpg");
    background-clip: text;
    -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.

Transcript de la vidéo

Voyons comment incruster une image dans un texte sur un site web. C'est quelque chose qu'on ne fait pas souvent, qu'on ne voit pas énormément, qui est très facile à faire et qui peut, si c'est utilisé de manière intelligente et avec parcimonie, être très joli. Vous voyez ici que j'ai incrusté cette image dans ce titre, et c'est bien du texte, ce n'est pas une image que j'ai faite sur Photoshop, puisque je peux le sélectionner. Ici, j'ai fait quatre exemples avec cette image également, et puis celle-ci, et puis celle-là. Et ici, pour comparer, le texte écrit en gris foncé, sans images incrustées dedans.

Comment on fait ça ? On va utiliser du CSS, ça va être quelques petites lignes de code super simples à mettre en place. Dans mon exemple, je vais le faire avec WordPress et puis le thème Divi, mais ce que je vais vous montrer, vous pouvez l'appliquer à n'importe quel type de site, que vous utilisiez WordPress ou Joomla ou PrestaShop, ou que vous ayez un site fait en HTML, CSS, avec Bootstrap ou programmé en PHP ou en Python, peu importe. Ça va marcher pour tous les sites, et pareil pour WordPress, que vous utilisiez le thème Avada, Divi, OceanWP, Astra, n'importe quel thème, ça va marcher, parce qu'on va simplement mettre une petite ligne de code CSS qui peut s'appliquer à tout type de site.

Donc allons-y, comment est-ce qu'on fait ça ? Pour incruster une image dans un texte, on va simplement lui donner des instructions en CSS, qu'on va appliquer au sélecteur de notre texte, ici, avec l'adresse de l'image qu'on veut incruster dans le texte. Je vais vous montrer tout ça en détail. La première chose à faire, c'est qu'il faut qu'on trouve le sélecteur de notre texte, celui à qui on va donner le CSS, c'est ce qui est ici. La deuxième chose qu'il faudra qu'on fasse, c'est savoir comment mettre du CSS dans notre site. Et puis la dernière chose, ça sera d'avoir l'URL de l'image qu'on veut incruster dans notre texte.

Donc, première chose, trouver le sélecteur. Ici, j'utilise Divi, mais peu importe votre système, ce que vous voulez, c'est avoir un identifiant qui va vous permettre de viser, par exemple, seulement ce titre dans votre site. Ce serait un peu dommage qu'on incruste les images dans tous les textes de votre site. Donc quel que soit votre thème WordPress, ou même si vous utilisez autre chose, vous allez souvent avoir un moyen d'appliquer une classe CSS à un élément.

Ici, moi, j'ai cliqué avec Divi pour modifier mon élément, et dans Divi, ça se trouve dans « Avancé », « ID et classes CSS ». Et ici, je peux mettre ce que je veux. Moi, je vais l'appeler « image-dans-texte ». Ça, c'est une classe CSS, donc on ne met pas d'espaces, pas d'accents évidemment.

J'applique ceci à mon module texte, et vous, si vous n'utilisez pas Divi, vous appliquez ceci à votre module, ou dans votre code HTML tout simplement.

Ensuite, je viens ici et je vais copier-coller le sélecteur que j'ai choisi d'utiliser. Donc ça, c'est la classe que j'ai appliquée à mon module, et ensuite, mon titre. Ici, moi, j'ai utilisé un H2, donc je vais ajouter ici « h2 ». Si vous avez utilisé un H1 ou un H5, vous mettez H1 ou H5. Et puis si vous avez mis une classe CSS à votre texte, eh bien ici, vous mettez le nom de la classe en question. Donc j'ai mon sélecteur, comme celui-ci. C'est une classe, je vais lui mettre un point, et je n'ai plus qu'à mettre mes instructions CSS à l'intérieur.

Donc étape 2, où mettre le CSS dans notre site. Vous pouvez vous rendre dans « Apparence », « Personnaliser », et ici « CSS additionnel ». Et si vous travaillez directement dans les fichiers, vous pouvez vous rendre dans « Apparence », « Éditeur de thème ». Ici, assurez-vous d'avoir bien un thème enfant, parce qu'on ne peut pas modifier un thème parent ou d'origine de WordPress. Vous vous rendez dans style.css, et puis vous tapez votre CSS ici.

Nous, on va utiliser « Apparence », « Personnaliser », et ici « CSS additionnel ». Voilà où mettre le CSS. Maintenant, il me manque simplement les instructions.

Donc on va dire étape 3, instructions CSS. Ici, on va coller le sélecteur, et je vais mettre le reste un petit peu plus bas pour mettre une nouvelle instruction. Et puis ce qu'on va faire, c'est qu'on va déjà tester notre sélecteur en disant simplement « color: red; », couleur rouge, pour être sûr que notre sélecteur CSS fonctionne. Il fonctionne bien, vous voyez qu'ici on est passé au rouge. Donc je peux enlever ce test « color: red ».

Maintenant, voici les instructions à utiliser. Prenons la première. Elle consiste à déclarer un fond, qu'on va centrer et puis étendre sur toute la largeur, un fond qui consiste à mettre cette image sur le texte. Ici, vous voyez que ça la met dans le fond au lieu de l'incruster dans le texte. On va rajouter cette instruction suivante, et puis celle-ci, pour obtenir ce résultat.

La première instruction, « background-clip: text », c'est pour lui dire de mettre l'image de fond dans le texte au lieu de la mettre derrière, comme on avait au début. La deuxième, ici, vous voyez que c'est la même, « background-clip », simplement elle est précédée par « -webkit- ». « -webkit- », c'est une instruction qui va dire qu'il faut appliquer ça à certains navigateurs, au cas où la première ne s'appliquerait pas. Ensuite, on a « text-fill-color: transparent », c'est-à-dire qu'on va enlever la couleur du texte pour qu'on puisse voir l'image. Et celle-ci est aussi précédée par « -webkit- », parce que ce n'est pas une instruction qui est standard.

C'est-à-dire que ce qu'on fait là, ça ne va pas forcément marcher dans tous les navigateurs. C'est toujours comme ça, le web : on peut avoir des résultats différents pour un même site dans différents navigateurs. Donc j'ai testé ceci sur Windows 10, sur Google Chrome, Firefox, et puis le dernier Internet Explorer, qui s'appelle Edge. Si jamais vous utilisez ça sur votre site, assurez-vous de bien vérifier que ça fonctionne dans tous les navigateurs, et puis que le résultat reste lisible si jamais ça ne fonctionne pas.

Dernière étape, comment obtenir l'URL, c'est-à-dire l'adresse, de l'image qu'on utilise. Si vous êtes dans WordPress, ce qu'on va faire, c'est qu'on va se rendre dans « Médias », « Ajouter ». Ici, je vais déposer mon fichier depuis mon ordinateur, ou bien cliquer sur « Sélectionner des fichiers », puis le sélectionner. Maintenant, mon image est ici, je clique sur « Modifier », et ici j'ai l'URL du fichier. Donc je peux faire un triple clic puis un Ctrl+C, ou bien simplement cliquer sur « Copier l'URL dans le presse-papier ».

Maintenant, j'ai l'URL de mon image, donc je vais prendre celle-là, la supprimer et mettre la nouvelle URL, et on voit que mon image, qui est celle-ci, est bien intégrée dans mon texte. Comme vous le voyez, il y a des images qui marchent mieux que d'autres. Par exemple, celle-ci, on peut se dire qu'elle est sympa, puis en fait, dans le titre, elle n'est pas terrible, elle est assez nulle. Celle-là, c'est pas mal, mais c'est un peu bizarre. En revanche, celle-là, elle fonctionne super bien. Donc on va en essayer d'autres. Là, je viens d'utiliser celle-ci, et je vous ai aussi préparé celle-là, et puis celle-là.

Donc faisons ceci : ce que je vais faire, c'est que pour toutes les garder en même temps à l'écran, ici, je vais dupliquer mon texte. Je vais lui dire que celle-là, c'est la numéro 5. Ici, je vais dupliquer mon image et je vais aller prendre celle que je viens d'ajouter, comme ça on aura un bon aperçu de tous. Ensuite, je fais la même chose ici pour la numéro 6, et ici je vais lui mettre mon image numéro 6, qui est les vagues. Et puis pour la dernière, je duplique celui-ci, qui sera ma numéro 7, et puis juste pour qu'on se souvienne bien de l'image qu'on avait mise ici, on lui change l'image pour la numéro 7. J'enregistre.

Simplement, maintenant je reviens ici. J'avais déjà créé avant, pour la démo, 1, 2, 3, 4, et la 5 je viens de la faire avec vous. Il nous reste la 6 et la 7, simplement pour voir le résultat avec l'image bleue puis l'image verte. Maintenant, je vais prendre l'URL de l'image bleue, la copier ici, et puis prendre l'URL de l'image verte et la coller ici. Donc maintenant, il faut que je me relise, au cas où j'aurais fait une erreur : 1, 2, 3, 4, 5, 6, 7. Ça m'a l'air bon.

On va publier. On n'a plus besoin de la médiathèque, on enregistre la page Divi, celle-là, on n'en a plus besoin. Je vais faire un clic molette sur « Quitter le Visual Builder » et voyons quels résultats on a. Ça donne bien, tout pas mal. Celle-ci rend bien, même si ce n'est pas très homogène de gauche à droite, puisqu'évidemment, là, on avait plutôt du noir. La suivante est assez jolie, même si c'est un petit peu étrange en fait. Celle-là, pas terrible. Et puis la 7e rend plutôt pas mal.

Voilà, donc il faudra faire des essais avec différentes images. C'est pour ça que j'ai créé ici cette page de démonstration, pour tester un peu différents types d'images et puis voir celle qui fonctionne le mieux. Je vous mets toutes les infos dans la description de cette vidéo. N'oubliez pas de vous abonner à la chaîne et d'activer les notifications pour que je puisse continuer de faire des vidéos gratuites. Bonne journée à vous.