title: Email Design: Text over background image
body: <p>Am am trying to create a header for an email that has a background image and text centered over it. This is how it looks in &quot;normal&quot; email clients:</p>
  <p><a href="https://i.stack.imgur.com/lznuv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lznuv.png" alt="enter image description here" /></a></p>
  <p>However in outlook it doesn't quit work, it ends up like this:</p>
  <p><a href="https://i.stack.imgur.com/zaZhv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zaZhv.png" alt="enter image description here" /></a></p>
  <p>Are there any email gurus that can help me fix this?</p>
  <p>Here is what I have so far (built in react):</p>
  <pre><code>&lt;table width=&quot;640&quot; cellPadding=&quot;0&quot; cellSpacing=&quot;0&quot; align=&quot;center&quot; style={{ margin: '0 auto' }}&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td
              height=&quot;143&quot;
              width=&quot;640&quot;
              align=&quot;center&quot;
              valign=&quot;middle&quot;
              background=&quot;https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg&quot;
              style={{ backgroundColor: '#00A699', backgroundSize: 'cover' }}
          &gt;
              &lt;div
                  dangerouslySetInnerHTML={{
                      __html: `&lt;!--[if gte mso 9]&gt;
                          &lt;v:rect xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot; fill=&quot;true&quot; stroke=&quot;false&quot; style=&quot;width:640px;height:143px&quot;&gt;
                            &lt;v:fill type=&quot;frame&quot; src=&quot;https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg&quot; /&gt;
                            &lt;v:textbox inset=&quot;0,0,0,0&quot; style=&quot;v-text-anchor:middle&quot;&gt;
                            &lt;![endif]--&gt;`,
                  }}
              /&gt;
              &lt;table
                  cellPadding=&quot;0&quot;
                  cellSpacing=&quot;0&quot;
                  className=&quot;arb_w100 &quot;
                  align=&quot;center&quot;
                  style={{ margin: '0 auto' }}
              &gt;
                  &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td align=&quot;center&quot;&gt;
                          &lt;td
                              align=&quot;center&quot;
                              valign=&quot;bottom&quot;
                              className=&quot;arb_headline_1&quot;
                              style={{ paddingTop: '10px' }}
                          &gt;
                                              &lt;span
                                                  style={{
                                                      fontSize: '22px',
                                                      fontWeight: 400,
                                                      fontFamily: 'Helvetica, Arial, sans-serif',
                                                      lineHeight: '28px',
                                                      color: '#ffffff',
                                                  }}
                                              &gt;
                                                  For a limited time, take
                                              &lt;/span&gt;
                          &lt;/td&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;div
                  dangerouslySetInnerHTML={{
                      __html: `&lt;!--[if gte mso 9]&gt;
                            &lt;/v:textbox&gt;
                          &lt;/v:rect&gt;
                        &lt;![endif]--&gt;`,
                  }}
              /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>Below is the code from above translated to standard HTML:</p>
  <pre><code>&lt;table width=&quot;640&quot; cellPadding=&quot;0&quot; cellSpacing=&quot;0&quot; align=&quot;center&quot; style=&quot;margin:0 auto&quot;&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td height=&quot;143&quot; width=&quot;640&quot; align=&quot;center&quot; valign=&quot;middle&quot;
              background=&quot;https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg&quot;
              style=&quot;background-color:#00A699;background-size:cover&quot;&gt;
              &lt;div&gt;&lt;!--[if gte mso 9]&gt;
                          &lt;v:rect xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot; fill=&quot;true&quot; stroke=&quot;false&quot; style=&quot;width:640px;height:143px&quot;&gt;
                            &lt;v:fill type=&quot;frame&quot; src=&quot;https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg&quot; /&gt;
                            &lt;v:textbox inset=&quot;0,0,0,0&quot; style=&quot;v-text-anchor:middle&quot;&gt;
                            &lt;![endif]--&gt;&lt;/div&gt;
              &lt;table cellPadding=&quot;0&quot; cellSpacing=&quot;0&quot; className=&quot;arb_w100 &quot; align=&quot;center&quot; style=&quot;margin:0 auto&quot;&gt;
                  &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td align=&quot;center&quot;&gt;
                          &lt;td align=&quot;center&quot; valign=&quot;bottom&quot; className=&quot;arb_headline_1&quot; style=&quot;padding-top: 10px;&quot;&gt;&lt;span
                              style=&quot;font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);&quot;&gt;For a limited time, take&lt;/span&gt;
                          &lt;/td&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;div&gt;&lt;!--[if gte mso 9]&gt;
                            &lt;/v:textbox&gt;
                          &lt;/v:rect&gt;
                        &lt;![endif]--&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>