Background images in HTML email

[FesterSXS]

Hi,

I am having GREAT difficulty in applying background images in this HTML email I am making. The images show fine when the HTML template is viewed in IE and also look fine when I load it as a stationery file in Outlook. The background images are not being displayed though in the final email after it has been sent. Below is the code I am using to apply the background image.

Any ideas????

<TD STYLE=&quot;background-image: URL('middle.jpg'); background-color: #CDDDFD;&quot;>
...
</TD>

(also posted in E-mail issues forum) Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Targol]

Have'nt you a problem of relative path ? I mean, when you are on the machine on wich you created the html code, the jpeg file is on the same path than your htm file so the background is displayed ok. But when you send the mail, I'm not really sure you send the jpg with it. So if you replace that :

<TD STYLE=&quot;background-image: URL('middle.jpg'); background-color: #CDDDFD;&quot;>

by that :

<TD STYLE=&quot;background-image: URL('[URL unfurl="true"]http://urlToYourImagesDirectory/middle.jpg');[/URL] background-color: #CDDDFD;&quot;>

I think that'll work better. Water is not bad as long as it stays out human body ;-)

 

[FesterSXS]

the images are all in the Outlook stationery folder. All the other images in the email are being displayed correctly in the final email - but not the ones that are set as backgrounds. I'm afraid I can't use internet based images for this email. Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Targol]

another try :

<TD background='middle.jpg' style=&quot;background-color: #CDDDFD;&quot;>

Water is not bad as long as it stays out human body ;-)

 

[FesterSXS]

i've already tried that and had the same problem Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Targol]

So, the last thing i see is to create a div with absolute position and size that takes all your page in wich you create an img (you told img worked). use the z-index style attribute to display it behind your normal html content...

a little nuts no ??? Water is not bad as long as it stays out human body ;-)

 

[FesterSXS]

I've done that already too and the image showed fine (on most recipients anyway) However, I would like to keep this template as flexible as possible as we will be using it again and again for various mailshots within the company. The background image I am having trouble with is a 1px high graphic that is being stretched vertically to fill a column of text. I therefore need to set it as a background otherwise I have to set the height of the image to the height of the text which will be different each time.

Grrrrr this is getting on my nerves - why didnt I stick to needlework!!!
Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Targol]

You can obtain the same effect as a vertical tiling specifying the eight and width attributes for your image. For exemple if your image is 100x1, the following tag will work the same way as a "background-image" with a "background-repeat : repeat-y" :

<img width=&quot;100px&quot; eight=&quot;300px&quot; ...>

To be more flexible, you can set the width in html and the eight by script (in the onload event for exemple) based on the document.clienteight. Water is not bad as long as it stays out human body ;-)