Outlook body background no-repeat
I am sending an Email in HTML format geared toward outlook 2007/2010. I applied a background image开发者_如何学C to body tag but it does not work. Code as below:
<body
style="background-image: url('http://example.com/bg.jpg');
background-repeat: no-repeat;
background-position:top center;">
However if I change the "no-repeat" to "repeat-y no-repeat", it shows the background image but it repeats.
Can anyone help me with this?
I'm assuming here you don't want the background image to repeat?
Maybe you want to have a single background image for the header and then a specific background colour behind the main content area?
In this case, assuming it's not possible to have a non-repeating bg image (I'm not sure to be honest), I'd repeat-y the image and have a container below the header, the same width as your background image, with the appropriate bg colour set so it obscures the repeated bg image.
It's also worth adding the bg image to the first table container as well so that if anyone reads the message in a webmail client they'll still see the background image (many webmail clients strip away the head and body tags).
I haven't tested this but here's roughly what I'm thinking:
<body style="
padding:0;
margin:0;
background-image:url(http:/example.com/720pxx200px_bg_image.png);
background-repeat:repeat-y no-repeat;
background-position:center top;">
<table style="
border-collapse:collapse;
padding:0;
margin:0;
width:100%;
background-image:url(http:/example.com/720pxx200px_bg_image.png);
background-repeat:repeat-y no-repeat;
background-position:center top;">
<tr>
<td align="center" valign="top">
<table style="
border-collapse:collapse;
padding:0;
margin:0;
width:720px;
height:200px;">
<tr>
<td><h1>Header Content Goes Here</h1></td>
</tr>
</table>
<table style="
border-collapse:collapse;
padding:0;
margin:0;
width:720px;
background-color:#fff;">
<tr>
<td><p>Body Content Goes Here</p></td>
</tr>
</table>
</td>
</tr>
Choose one style. repeat-y implies that it doesn't repeat in the x direction.
You can hack it with a very wide image, that is positioned in the horizontal center. It repeats both ways (default).
This should allow you to get the visual effect you are after
加载中,请稍侯......
精彩评论