Intégration newsletter : texte sur une image

**diane621** · 03/04/2019, 15h07

Bonjour,

Je crée une newsletter. J’aimerais écrire un petit texte (Collection printemps-été 2019) et ajouter un bouton (Découvrir) sur une image.
Comment est-ce qu'on peut faire ça ?

Mon code :
https://jsfiddle.net/8jr1hgbq/

Voici à quoi j’aimerais cela ressemble :
Nom : img_1.jpg
Affichages : 240
Taille : 8,5 Ko

Merci de votre aide.

**paoli121** · 03/04/2019, 16h30

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="cover">
    <div id="detail-on-cover">
        <h1>Text</h1>
         <button id="btn"> </button>
    <div>
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#cover{
    position : relative;
    height : 500px;
    width : 700px;
    background-image : url(le_chemin_vers_ton_image);
    background-size : cover;
    background-position : center;  
}
#detail-on-cover{
    position : absolute;
    top : 200px;
    left : 0; right : 0;
    text-align  : center
}

**diane621** · 04/04/2019, 12h02

Mais on m'a toujours dit de ne pas mettre de background-image : url(le_chemin_vers_ton_image); sur les newsletters

Et qu'il faut utiliser des table

Invité · 04/04/2019, 14h09

Bonjour,

Envoyé par diane621

Mais on m'a toujours dit de ne pas mettre de background-image...

En effet, certaine messagerie suppriment les images en background.

1- une solution simple est :

d'intégrer le texte et le bouton DANS l'image ! (via un logiciel de traitement d'image : Photoshop, Gimp,..)
mettre le lien sur l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="..."><img src="..." /></a>

2- Une autre solution est de mettre le texte et le bouton dans un <div> en positon:absolute; SUR l'image (dans le code : juste après).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
        <table class="content" bgcolor="red" align="center" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td style="text-align:center;position:relative;">
              <img src="https://image.noelshack.com/fichiers/2019/14/3/1554295972-photo.png" alt="printemps-été" />
              <div style="position:absolute;width:100%;bottom:50px;left:0;text-align:center;">
                <h2 style="text-align:center;color:#000;font-family:Arial,sans-serif;text-decoration:none;font-weight:bold;font-size:1.8em">Collection Printemps-été 2019</h2>
                <a href="... " style="padding:10px;margin-top:50px;border:2px solid #000;color:#000;font-family:Arial,sans-serif;text-decoration:none;font-weight:bold;font-size:1.5em">Découvrir</a>
              </div>
            </td>
          </tr>
        </table>

3- Concernant le CSS, je te conseille de mettre le CSS directement "in line", SUR les éléments concernés (plutôt que dans <style>).
Certaines messageries suppriment aussi les balises <head>, <script>, <style> (et contenu).

**diane621** · 04/04/2019, 16h15

Merci jreaux62 !!!

Intégration newsletter : texte sur une image

HTML

Discussions similaires

Partager

Partager