how to make a full background-image emailing without text?
Question
I would like to know how to make a background appears full width in an emailing even without a text. I don't lnow how to make it appear even without text you can see and its real dimensions. I want the result to be similar to this with the text at the bottom like a footer. Does someone know how to do this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> <title></title> </head> <body> <title></title> <div class="email-background" style="padding:10px;background:white;"> <div class="pre-header" style="background:white;font-size:5px;color:white;text-align:left;max-width:500px;"> </div> <!--BODY--> <div class="email-container" style="background:white;font-family:Varela Round,arial, sans-serif;color:#03165c;margin:0 auto;max-width:100%;"> <table class="contenu" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="white"> <tr> <td height="1" style="font-size:1;line-height:1;background:#374b94;"> </td> </tr> <tr> <td valign="top" bgcolor="#374b94" background="https://image.noelshack.com/fichiers/2017/51/4/1513863465-carte2.png" style="background-repeat:no-repeat;background-size:contain;background-position: center; "> <!--[if !gte mso 9]><!----> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill type="tile" src="https://image.noelshack.com/fichiers/2017/51/4/1513863465-carte2.png" color="#374b94"> <v:textbox inset="0,0,0,0"> <!--<![endif]--> <tr> <td> <p align="left" style="font-family:Varela Round,arial, sans-serif;color:#c6c9dc;font-size:10px;"> Si vous ne souhaitez plus recevoir d'email cliquez <a class="unsubscribe" href="mailto:desinscription@marketing-idxcel.fr?subject=Désinscription&body=Je%20souhaite%20ne%20plus%20recevoir%20de%20mail%20de%20votre%20part" style="color:#c6c9dc;text-decoration:underline #c6c9dc;">ici</a> </p> </td> </tr> <!--[if !gte mso 9]><!----> </v:textbox> </v:rect> <!--<![endif]--> </td> </tr> </table> </div> <!--/BODY--> </div> </body> </html>
1 answers
solution1
0 2017-12-21 15:18:49
To the image style - add height.If you inspect it you can see that it have only width.
background-repeat:no-repeat;
background-size:contain;
background-position: center;
height: 500px;
/** or padding: some value **/
padding-bottom: 40%;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Alternative to background-image in emailing?
How to make responsive full width X full height background-image with text
how to can I make a background-image full with and height
How to make background-image size height always equal what the image height needs to be for full width image?
How to make a background-image on a image responsive
background-image with a text
How do I make my background-image take full height of div?
How to make this background-image responsive
How to make background-image accessible?
How to make responsive background-image?
Related Tags