0

I had problems with backgrounds not showing in most E-Mail clients such as GMail or Yahoo Mail but I found this thread and problem solved by replacing (although I lost some properties like background-repeat and position) <table style="background: url('bg.png');"> to <table background="bg.png">.

But now I'm facing the same problem in Hotmail and none of the above form of codes seems to work.

This page is the reference of answers to most similar questions in stackoverflow, and it says that Outlook.com (new hotmail) does not support css background and I should use background attribute instead, but mine is not working.

What I'm doing wrong?!

Community
  • 1
  • 1
Farid Rn
  • 3,167
  • 5
  • 39
  • 66

1 Answers1

2

Outlook only supports background in the body tag.

Two ways to go for email backgrounds:

Via VML: emailbg.net

or here is the less fancy way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body style="margin: 0px; padding: 0px; background-image: url('http://lorempixel.com/100/100/food/'); background-color: #252525; background-repeat: repeat-y no-repeat; background-position: top left;" bgcolor="#252525">
<!-- BODY FAKE PANEL -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="http://lorempixel.com/100/100/food/">
  <tr>
    <td valign="top">
<!-- CENTER FLOAT -->
      <table width="600" height="800" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td align="center">
Center panel
          </td>
        </tr>
      </table>
<!-- /CENTER FLOAT -->
    </td>
  </tr>
</table>
<!-- /BODY FAKE PANEL -->
</body>
</html>
John
  • 11,985
  • 3
  • 45
  • 60
  • I'm sure your fancy solution wont do what I want, because I'm using too many backgrounds for different elements (table, td, etc.) but I'll take a look at VML way, I hope it works... – Farid Rn Apr 12 '13 at 17:13
  • 1
    My (less) fancy way only works for the entire email body. Up until the VML technique was discovered, there was no way to add background images to elements in Outlook. – John Apr 12 '13 at 19:57