0

I have to do some headings in e-mail template. The text is dynamic, so I don't know the width. I know, that I rather can not use background images because of outlook... I just wondering if somebody of you have any suggestion how to do something like this in mails:

enter image description here

(of course I'm using tables)

Jmh2013
  • 2,625
  • 2
  • 26
  • 42
sorioz
  • 45
  • 4
  • can you post your HTML code? – Kheema Pandey Aug 19 '14 at 14:49
  • you can use an `` for the stripes and a `

    ` on top of that image

     – singe3 Aug 19 '14 at 14:54
  • Kheema Pandley: I don't have HTML code yet, because I dont know how to solve it. I'm still thinking... singe31: how can you move a text above an image in mails? Im nearly sure, you can not. There is no way to use position:absolute, or margin minus... – sorioz Aug 19 '14 at 14:57
  • http://stackoverflow.com/questions/21882361/email-client-support-negative-margin-value – sorioz Aug 19 '14 at 15:10
  • http://stackoverflow.com/questions/3403205/absolute-positioning-in-gmail-emails – sorioz Aug 19 '14 at 15:11

2 Answers2

0

Take a look at this JSFiddle i just made: http://jsfiddle.net/de5L5vmo/1/

The Html

<div class="background">
    <div class="content">
        <h2>Zahlungsart</h2>
    </div>
</div>

The Css

.background {
      background-image: url('http://www.tutorialwelt.de/wp-content/uploads/2010/01/streifen4.jpg');
}

h2 {
    text-align:center;
    font-family:sans-serif;
}

.content{
    margin:0 auto;
    background-color:white;
    width: 150px;
}
Maharkus
  • 2,841
  • 21
  • 35
  • Thank you for your answer, its work in HTML, but it wont work with some e-mails clients: background-image is not supported by outlook. I want a cross-client solution. See the supported codes: https://www.campaignmonitor.com/css/ – sorioz Aug 19 '14 at 15:48
0

This should work for you. Here I'm using the bullet-proof background image method posted at http://backgrounds.cm/

Here's what it looks like: http://codepen.io/bdavis/pen/KmonD

Enjoy! 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />
 </head>
 <body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background:    #ffffff; color: #222222; font-family: 'Helvetica Neue', arial, sans-serif; line-height: 1.3; margin: 0; min-width: 100%; padding: 0; width: 100% !important" bgcolor="#ffffff">
 <table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr style="padding:0">
   <td style="border-collapse: collapse !important; padding: 0" background="http://www.tutorialwelt.de/wp-content/uploads/2010/01/streifen4.jpg" bgcolor="#222222" valign="top">
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
    <v:fill type="tile" src="http://www.tutorialwelt.de/wp-content/uploads/2010/01/streifen4.jpg" color="#222222" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
    <![endif]-->
    <div style="text-align:center;">
     <center>
        <font style="display:inline-block;background-color:#FFFFFF;text-align:center;font-family:'helvetica-neue', sans-serif;font-weight:bold;font-size:24px;color:#222222;" align="center">&nbsp;ZAHLUNGSART&nbsp;</font>
     </center>
    </div>
    <!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
    <![endif]-->
  </td>
 </tr>
</table>
</body>
</html>
Brett D.
  • 106
  • 2
  • Thank you, it solved my problem! I wanted to add you +1, but I don't have enough reputation. :) – sorioz Oct 20 '14 at 08:28