how to set background image no-repeat for outlook 2007 and above version

Question

how to set background image no-repeat for outlook 2007 and above version

535 Views Asked by Sayali Shinde At 29 June 2022 at 17:40

I want to add background image to email template for outlook but in outlook image show repeatedly. I tried below code, but it didn't work.

Also I tried with

<!--[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml">
          <v:fill type="frame" src="https://valasysb2bmarketing.com//email-raw/email-9.png" color="#f6f6f6"/>
        </v:rect>
<![endif]-->

this code,but this also not working

Original Q&A

There are 1 best solutions below

**Nathan** · Answer 1 · 2022-07-07T01:22:59.893000

For non-tiled background images that work in Outlook, as well as other email clients, use something similar to:

<!doctype html>
<html>

<body>
    <table>
    <tr>
        <td bgcolor="#f6f6f6" background="https://valasysb2bmarketing.com//email-raw/email-9.png" width="600" height="987" valign="top" style="background-image: url('https://valasysb2bmarketing.com//email-raw/email-9.png');background-repeat: no-repeat;background-position: center;background-size:contain;background-color:#f6f6f6;width:100%;height:auto;padding:0;">
        <!--[if mso]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 450pt; height: 740pt;" src="https://valasysb2bmarketing.com//email-raw/email-9.png" />                
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block;position: absolute; width: 450pt; height:740pt;">
        <v:fill  opacity="0%" color="#f6f6f6"  />
        <v:textbox inset="0,0,0,0">
        <![endif]-->
        <!--[if !mso]>--><div><!--<![endif]-->
            <!-- OVERLAYED CONTENT START -->
            <table width="600">
                <tr>
                    <td style="padding:10px 90px 200px 90px">
                        <p>Overlay content asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf  asdf asdf </p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>

                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>Overlay content</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                    </td>
                </tr>
            </table>
            <!-- OVERLAYED CONTENT END -->
        <!--[if !mso]>--></div><!--<![endif]-->
        <!--[if mso]></v:textbox></v:fill></v:rect></v:image><![endif]-->
        </td>
    </tr>
    </table>
</body>
</html>

Note the width and height for Outlook are the width and height for the image multiplied by 0.75 (i.e. 600px x 0.75 = 450pt).

This doesn't come without it's issues though.

First, you need a certain amount of content to view the background image.

Second, this probably doesn't work for mobiles.

Third, any variation of text may make it look bad.

I suggest you do in fact use a tiled background, with 1px border on a table for the black border, and a new table row with the orange email as a separate (foreground) <img>. That way, your content can easily grow without layout issues.

how to set background image no-repeat for outlook 2007 and above version

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in OUTLOOK

Related Questions in HTML-EMAIL

Related Questions in VML

Trending Questions

Popular # Hahtags

Popular Questions