Intégration newsletter : texte sur une image

Version imprimable

03/04/2019, 15h07
diane621

2 pièce(s) jointe(s)

Intégration newsletter : texte sur une image

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 :
Pièce jointe 463677

Merci de votre aide.

HTML:

Code:

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

Code:

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
}

04/04/2019, 12h02
diane621

Mais on m'a toujours dit de ne pas mettre de background-image : url(le_chemin_vers_ton_image); sur les newsletters :roll:
Et qu'il faut utiliser des table

Bonjour,

Citation:

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:

<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:

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

04/04/2019, 16h15
diane621

Merci jreaux62 !!!