Comment ajouter une image d'arrière-plan d’e-mail HTML à votre e-mail (exemples de code inclus)

Les e-mails ne se résument pas seulement au contenu et à ce qu'il apporte au destinataire. Ils sont aussi une question de design et d'émotions qu'il suscite chez votre public. Les images d'arrière-plan sont l'un des moyens les plus courants de créer rapidement et facilement un style unique pour votre newsletter. Cet article vous les présente. Nous vous montrerons comment créer une image d'arrière-plan HTML pour votre modèle d'e-mail, y compris tout le code nécessaire. Nous vous expliquerons également comment simplifier votre processus de création et ajouter des images d'arrière-plan sans coder avec Stripo.

Qu'est-ce qu’une image d'arrière-plan ?

Tout d'abord, découvrons ce qu'est une image d' arrière-plan. Ces images sont placées derrière le contenu principal de l'e-mail, servant de support au reste du contenu (textes, images, bannières, carrousels, etc.). Cela paraît simple, et ça l'est.

Pourquoi en avez-vous besoin ?

Comme l'image d'arrière-plan semble simple et, dans une certaine mesure, une façon « à l'ancienne » de concevoir vos e-mails, pourquoi s'en soucier ?

Nous vous proposons trois avantages distinctifs pour lesquels vous devriez envisager d’utiliser des images d’arrière-plan lors de la création de votre propre newsletter :

• l'avantage principal d'une image d'arrière-plan est que vous pouvez placer du contenu HTML supplémentaire dessus, tandis que dans d'autres scénarios, cet emplacement de contenu sera occupé par d'autres contenus (vous avez le choix entre une image d'arrière -plan et du texte, ou seulement une image prédéfinie avec le texte déjà dessus, par exemple) ;
• le texte sur une image d'arrière-plan (par opposition à une image plate avec du texte déjà dessus) peut être lu même si les images sont désactivées (certains destinataires peuvent toujours désactiver l'affichage de l'image en raison d'une connexion Internet limitée ou faible) ;
• l'utilisation d'images d'arrière-plan vous offre davantage de possibilités pour concevoir des e-mails uniques et de mettre en valeur votre marque en mélangeant et en assortissant des arrière-plans et divers contenus par-dessus.

Comme vous pouvez le constater, vous disposez d’un ensemble d’avantages assez solides qui peuvent rendre votre processus de conception d’e-mails plus diversifié en termes de création de l’apparence de votre e-mail.

Choses à savoir avant d'ajouter les images d'arrière-plan à votre e-mail HTML

Avant d'appliquer une image d'arrière-plan à votre e-mail, assurez-vous qu'elle s'intègre parfaitement à votre design. En changeant et en ajoutant des images d'arrière-plan et du contenu, certaines peuvent être esthétiques, tandis que d'autres peuvent vous surprendre. Nous allons maintenant vous expliquer pourquoi.

Rapport de contraste

La première chose à laquelle vous devez penser lorsque vous ajoutez une image d'arrière-plan à votre e-mail est le contraste. Dans la conception d'un e-mail, le contraste correspond à la différence de couleur, de taille et d'autres éléments visuels entre les différentes parties, créant ainsi une hiérarchie et améliorant la lisibilité.

Il est crucial pour la lisibilité globale des e-mails de faire correspondre les couleurs de votre image d'arrière-plan et celles du contenu qui se trouve par-dessus.

Lors de la création d'une image d'arrière-plan et du contenu par-dessus, il est utile de suivre les Règles pour l'accessibilité des contenus Web (WCAG). Il s'agit d'un ensemble de normes techniques internationalement reconnues visant à rendre les sites web et les contenus numériques accessibles aux personnes en situation de handicap. En adaptant votre image d'arrière-plan et votre contenu à ces règles, tous les membres de votre public pourront lire vos e-mails.

Pour un processus de conception plus facile, toutes les combinaisons de couleurs que vous utilisez peuvent être vérifiées ici.

Aspect général et simplicité

Les couleurs et leur harmonie sont importantes, mais n'oubliez pas le design général et l'harmonie entre votre arrière-plan et votre contenu. Gardez toujours à l'esprit la densité globale de l'arrière-plan. Si les détails sont trop nombreux, même avec des couleurs bien choisies, le texte sera extrêmement difficile à lire. Le principe « plus on est de fous, plus on rit » n'est pas de mise ici.

Version de secours

En dernier lieu, et non moins important, est la nécessité d’avoir une version de secours. Tous les clients de messagerie ne prennent pas en charge les images d'arrière-plan ; par conséquent, votre arrière-plan pourrait ne pas s'afficher du tout. Lors du codage, assurez-vous donc de disposer d'une version de secours qui s'affichera à l'ouverture de l'e-mail pour les clients de messagerie qui n'affichent pas les images d'arrière-plan. Vous pouvez également créer une couleur de secours pour votre arrière-plan.

Comment coder l'image d'arrière-plan de votre e-mail HTML

Passons maintenant à l'essentiel de notre guide : la création de votre image d'arrière-plan. Nous vous guiderons pas à pas tout au long du processus et vous expliquerons toutes les subtilités du codage d'images d'arrière-plan dans vos e-mails. À la fin de ce guide, vous trouverez un exemple d'e-mail très simple avec une image d'arrière-plan et du texte par-dessus, qui ressemblera à ceci :

Nous utiliserons un exemple de code que vous pourrez coller dans votre propre e-mail plus tard.

Structure HTML de base

Tout d'abord, nous devons créer une base pour notre e-mail avec une image d'arrière-plan. Le code correspondant ressemblera à ceci :

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>
 

Il est composé de deux parties principales qui constituent la pierre angulaire de notre image, avec une image d'arrière-plan. La première est la partie <style></style> qui contiendra le code des styles d'e-mail et notre image d'arrière-plan. La seconde partie est <body></body> où nous devons placer notre contenu qui sera placé au-dessus de l' image d'arrière-plan de l'e-mail.

Ajout d'une structure de tableau pour la compatibilité

L'étape suivante consiste à ajouter une cellule de tableau pour notre e-mail. Comme de nombreux clients de messagerie (surtout les plus anciens) utilisent des tableaux pour la mise en page, nous utiliserons une structure de tableau pour garantir un affichage optimal de l'e-mail sur tous les appareils.

Copiez ce code et collez-le dans la partie <body></body>.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                <!-- Email content will go here -->
            </table>
        </td>
    </tr>
</table>
 

Nous plaçons ce code ici, car la section <body> contient du contenu visible dans l'e-mail. Ce code comporte deux tableaux : un externe et un interne.

• le tableau extérieur avec une largeur = "100%" garantit que la mise en page peut s'adapter à différentes tailles d'écran ;
• le tableau intérieur avec une largeur = "600" contient le contenu réel de l'e-mail et est centré pour créer un aspect propre et professionnel qui fonctionne sur différents appareils et clients de messagerie.

Créer une base pour l' image d'arrière-plan

Une fois la structure du tableau définie, nous devons créer un « wrapper » pour notre future image d'arrière-plan. Pour cela, nous allons créer un div à l'intérieur du tableau interne pour contenir l' image d'arrière-plan. C'est une étape importante, car nous créons un conteneur dédié à notre image d'arrière-plan et établissons une séparation claire entre le contenu et l' image d'arrière-plan.

En outre, le code de styles que nous ajouterons plus tard pourra modifier l'apparence séparée du contenu et de l'arrière-plan, ce qui est essentiel pour des capacités de conception de courrier électronique plus larges.

Prenez ce code :

<td class="email-body">
    <div class="content">
        <h1>Background Image and Text</h1>
        <p>You can place your own background and content here.</p>
    </div>
</td>
 

Et collez-le ici :

En conséquence, nous avons créé un contenu de base ci-dessus sous la forme d'un texte simple qui sera au-dessus de notre image d'arrière-plan.

Ajout du code CSS de l'image d'arrière-plan

Passons maintenant à l'essentiel : l' image d'arrière-plan s'affiche correctement. Dans la balise <style> de l'élément <head>, nous ajouterons du code CSS pour la classe .email-body afin de configurer l' image d'arrière-plan et de garantir son intégration dans différents clients de messagerie.

Pour donner vie à votre image d'arrière-plan, remplacez <style></style> par ce code :

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .email-body {
        background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        display: block;
    }
    .content {
        padding: 20px;
        color: white;  /* Change text color to ensure readability */
        font-family: Arial, sans-serif;
    }
</style>
 

Notre image d'arrière-plan est placée dans l'e-mail via un lien URL, que vous pouvez remplacer ici.

Avec ce code, vous disposez de plusieurs options pour modifier l'apparence de votre image d'arrière-plan et du contenu qui s'y trouve. Examinons chacune d'elles afin que vous compreniez mieux ce que vous pouvez modifier ici :

• margin: 0 supprime toute marge par défaut autour du corps du document. Par défaut, les navigateurs appliquent souvent une petite marge autour des bords de la page. La définir sur 0 garantit l'absence d'espace indésirable sur les bords extérieurs de l'e-mail ;
• padding: 0 est assez similaire à la précédente, mais supprime tout espacement par défaut à l'intérieur du corps. L'espacement est l'espace entre le contenu et la bordure d'un élément. Le définir à 0 garantit que le contenu commence tout au bord du corps, sans espace supplémentaire ;
• background-image est un élément clé ici et définit l' image d'arrière-plan de l'élément ;
• background-repeat: no-repeat empêche l'image de se répéter, garantissant qu'elle ne s'affiche qu'une seule fois, même si elle ne remplit pas toute la zone ;
• background-size: cover contrôle la façon dont l' image d'arrière-plan est mise à l'échelle, et cover garantit que l'image couvre toute la zone de l'élément, même si cela signifie qu'elle peut être recadrée (en termes simples, conserve son rapport hauteur/largeur tout en remplissant la zone, évitant ainsi tout espace) ;
• background-position: center est nécessaire pour centrer l' image d'arrière-plan dans l'élément ;
• width: 100% définit la largeur de l'élément .email-body et garantit que l' image d'arrière-plan s'étend sur toute la largeur de l'e-mail ;
• height: 100% définit la hauteur de l'élément .email-body à 100 % de son conteneur parent, ce qui permet à l'élément de remplir l'espace vertical disponible ;
• padding: 20px crée un espace de 20px sur tous les côtés entre le contenu et les bords du conteneur .content ;
• color: white Change la couleur du texte de l'élément .content en blanc. C'est particulièrement important lorsque l' image d'arrière-plan est sombre, car cela garantit la lisibilité et la netteté du texte ;
• font-family : Arial, sans-serif définit la famille de polices du texte sur Arial.

Ajout d'une partie de secours

Maintenant, terminons notre code d'image d'arrière-plan avec l'information importante selon laquelle les clients de messagerie ne peuvent pas charger les images définies sur l'arrière-plan de l'e-mail.

Copiez ce code et collez-le entre </style> et </head> :

<!--[if mso]>
    <style>
        .email-body {
            background: #f0f0f0; /* Fallback color for Outlook */
        }
    </style>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
        <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" />
    </v:background>
<![endif]-->
 

Le code de secours est relativement simple ici, mais parlons brièvement de ce qu'il fait :

• background: #f0f0f0 est votre couleur d'arrière-plan de secours que vous pouvez modifier en la couleur unie de secours dont vous avez besoin ;
• <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true"> est un élément VML (Vector Markup Language) utilisé par Outlook pour restituer les images d'arrière-plan ;
• <v:fill src=" https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg " /> définit l' image d'arrière-plan à utiliser dans Outlook, donc si vous devez la modifier, remplacez simplement le lien vers votre propre image ;
• <!--[if mso]> ... <![endif]--> est un bloc spécial pour Outlook, garantissant qu'Outlook peut restituer l' image d'arrière-plan à l'aide de VML, tandis que d'autres clients de messagerie ignorent cette partie.

Code complet

Et voilà ! Votre code d'e-mail avec image d'arrière-plan est terminé. Nous vous laissons un exemple de code complet pour que vous puissiez vérifier si vous avez tout bien exécuté en parcourant notre guide.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .email-body {
            background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
            display: block;
        }
        .content {
            padding: 20px;
            color: white;  /* Change text color to ensure readability */
            font-family: Arial, sans-serif;
        }
    </style>
    <!-- Outlook background image fallback -->
    <!--[if mso]>
        <style>
            .email-body {
                background: #f0f0f0; /* Fallback color for Outlook */
            }
        </style>
        <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
            <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" type="tile" />
        </v:background>
    <![endif]-->
</head>
<body>
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                        <td class="email-body">
                            <div class="content">
                                <h1>Background Image and Text</h1>
                                <p>You can place your own background and content here.</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
 

Comment ajouter une image d'arrière-plan à votre e-mail dans Stripo

Connaître le fonctionnement complet du code de votre image d'arrière-plan d'e-mail est essentiel. Mais que faire si vous manquez de temps ou si vous n'avez aucune expérience en programmation ? C'est là que Stripo entre en jeu. Voici un petit guide pour ajouter une image d'arrière-plan dans notre éditeur sans écrire une seule ligne de code.

Nous allons montrer comment tout fonctionne en utilisant notre structure de courrier électronique de base par défaut qui ressemble à ceci :

Ouvrir les paramètres de styles

Cliquez sur la structure dans laquelle vous souhaitez placer votre image d’arrière-plan, puis cliquez sur l’onglet Styles.

Activer l' option image d'arrière-plan

Pour commencer à configurer votre image d'arrière-plan, cliquez sur le commutateur portant le même nom.

Choisissez une manière d'ajouter votre image d'arrière-plan

Après avoir cliqué sur « Image d'arrière-plan », une fenêtre s'ouvre avec plusieurs options pour ajouter une image. Examinons brièvement chacune d'elles :

• vous pouvez ajouter une image depuis votre appareil en cliquant sur le champ d'ajout d'image principal ou en y collant l'URL de cette image ;
• les onglets Adresse e-mail et Projet affichent les images de vos galeries liées à l'e-mail ou à l'ensemble du projet (dans notre exemple, nous avons un e-mail et un projet vides, nous ne voyons donc aucune option d'image ici) ;
• les onglets Saisons et Décoration contiennent des éléments créés par notre équipe de conception parmi lesquels vous pouvez choisir (en recherchant parmi différentes catégories) et définir comme image d'arrière-plan ;
• Image AI ouvre une fenêtre séparée dans laquelle vous pouvez générer votre propre image à l'aide de l'IA (plus d'informations à ce sujet plus tard) ;
• Photostock, Icôns et GIF vous permettent de choisir parmi une grande variété d'images, d'icônes et de GIF gratuits provenant de différentes sources sans quitter l'éditeur.

Malgré toutes les options, nous utiliserons l'image de notre guide de code pour garder les choses cohérentes, et ainsi vous pouvez voir qu'il n'y a aucune différence visuelle entre le codage manuel et notre éditeur.

Ajustez l'image d'arrière-plan de votre e-mail

Nous avons donc ajouté notre image d'arrière-plan à la structure, et pour l'instant, elle ressemble à ceci :

C'est tout à fait normal, car notre éditeur affiche le conteneur vide au-dessus de l' image d'arrière-plan, indiquant que vous pouvez ajouter quelque chose par-dessus. Mais voyons maintenant les options de conception que vous pouvez appliquer à votre image d'arrière-plan :

• Répétition de l'image d'arrière-plan vous permet d'activer la répétition de l'arrière-plan ;
• la position horizontale et verticale vous permet de définir la position exacte de votre image d'arrière-plan à l'intérieur de l'élément ;
• la largeur et la hauteur de l'arrière-plan vous permettent de définir la taille exacte de l'arrière-plan de l' image d'arrière-plan ou d'utiliser des préréglages tels qu’auto,  couvrir ou contenir ;
• Border vous offre la possibilité de créer une bordure autour de votre image d'arrière-plan et de définir si elle aura une bordure complète ou uniquement sur les côtés ;
• l'option Rayon vous permet de définir le rayon de votre image d'arrière-plan en choisissant l'option Rayon pour tous les coins à la fois ou pour chaque coin séparément.

Ajoutez le contenu nécessaire

La dernière étape de l'utilisation des images d'arrière-plan dans un e-mail consiste à ajouter du contenu par-dessus. Pour reproduire l'exemple du guide de codage, nous allons ajouter deux blocs de texte dans le même conteneur.

Après cela, nous ajouterons le même texte de l’exemple de codage.

Après cela, nous définirons le style de paragraphe pour le premier bloc de texte sur H1 :

Et comme touche finale, nous avons défini les rembourrages supérieur et inférieur pour qu'ils ressemblent à notre premier exemple de codage.

Voilà, vous avez votre image d'arrière-plan et votre texte par-dessus sans avoir besoin de créer le code manuellement.

Générer des images d'arrière-plan de support avec L’IA générative

Nous vous avons promis de vous en dire plus sur notre outil de création d'images IA, alors commençons. Vous pouvez générer n'importe quelle image d'arrière-plan de section grâce aux fonctionnalités de L’IA générative, sans quitter l'éditeur.

Revenons quelques étapes en arrière dans notre guide et cliquons sur l'onglet Image AI lors de l'ajout d'une image à votre arrière-plan.

Créer des images avec L’IA générative est simple. Il vous suffit de :

• écrivez une invite pour guider la créativité de L’IA générative de la manière dont vous en avez besoin ;
• choisissez un modèle d’IA (chacun génère des images différemment en termes de styles, de qualité et de vitesse) ;
• définissez le style préféré de votre image ;
• définir le rapport hauteur/largeur ;
• cliquez sur le bouton Générer.

Après avoir cliqué, vous recevrez plusieurs images générées, que vous pourrez appliquer à l'arrière-plan en cliquant sur celle qui vous convient. Si le résultat ne vous convient pas, vous pouvez toujours modifier votre invite, votre modèle d'IA ou d'autres options et générer à nouveau l'image.

Une fois l’image ajoutée, vous pouvez appliquer les mêmes paramètres de style que ceux dont nous avons parlé précédemment.

Pour conclure

Comme vous pouvez le constater, créer des images d'arrière-plan dans un e-mail n'est pas si compliqué. Les exemples de code sont simples et peu nombreux ; créer votre propre image d'arrière-plan ne vous prendra donc pas beaucoup de temps. Cependant, vous pouvez le faire encore plus rapidement et facilement grâce à notre éditeur et obtenir le même résultat sans difficulté.