title: Outlook HTML CSS transparent background in cell within table
body: <p><strong>* UPDATE *</strong> I should've been clearer and perhaps less verbose. The "Web" team w/in the company I work for sent me the HTML. As I said, due to windows (SSIS) -> unix (SAS) -> mainframe (EBCDIC), I can NOT use anything with a !, unless it's content, and then I have to hard code in the ASCII equivalent. So, to shorten my question -- I need to do a table with a nested table that has a background image, and white text on top. This solution needs to work on (nearly) all email &amp; web browser platforms. (We don't care about really old, no longer supported, versions)</p>
  
  <p><strong>An alternate solution</strong> is if someone knows how to send the EBCDIC code assignment (5A) to pass and not get jacked, again windows->unix->mainframe. I know another team that sends x5A from SAS and it works. I'm really really trying to avoid ingesting the entire file into SAS just to do a find/replace, which would also likely screw up the fixed width file. But I could figure a way around that.
  <strong>* /UPDATE *</strong></p>
  
  <p>I'm bashing my head against the wall here .. I'm writing up HTML to be used as content for emails - in one spot there's a table with a nested table -- the outside has an image, the inside has text (as in, like a text box). </p>
  
  <p>I'm able to get it to work on everything (testing on EmailOnAcid) -- using rgba works, cept for ... yes outlook -- researching this (yay google) I now know Outlook doesn't support rgba. I've tried background-color:transparent. no joy. I've tried opacity:0, but that makes the text transparent (i feel like I'm close on that one, but missing something, maybe obvious)</p>
  
  <p>p.s. don't ask my why the code I was given has 3 redundant references to the background jpg. This content was given to me, and now I have to manhandle it into something that'll work in my system.</p>
  
  <p>Things I can't control - </p>
  
  <ul>
  <li>I can't get them to make me an image with text over it, they're being weird about it. </li>
  <li>Due to generating the text file which jumps from windows to unix to mainframe I can't use any ! that isn't email content. (i.e. no !important, no !-- comments , which means no if statements within the comment like [if gte mso 9], ...)</li>
  <li>There's a new standard of CSS floating around - I'm not a fan. But other orgs w/in the company don't generate the email text files on a windows server -- they do it in SAS (unix/linux) then to mainframe -- so they can use the ebcdic codes. It just won't work if I do the same in my files. :(</li>
  </ul>
  
  <p>Here's a chunk of the code (with the rgba) -- related css is below it</p>
  
  <pre><code> &lt;table border="0" width="600" cellspacing="0" cellpadding="0" class="deviceWidth"&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td background="http://not.real.path/something.jpg" bgcolor="#c8c7bc" valign="top" width="600" height="258" style="background-image: url(http://not.real.path/something.jpg) no-repeat center center;" id="heroImg" &gt;
  
                     &lt;div id="txtCntr"&gt;
                       &lt;table border="0" width="340" cellspacing="0" cellpadding="0" style="margin:50px 5px 10px 25px;display:block;" class="heroTxtTbl"&gt;
                          &lt;tr&gt;
                            &lt;td align="left" valign="middle" style="display:block; background-color:rgba(0, 0, 0, 0);"&gt;
  
                          &lt;p href="#" style="margin:0;padding:5px 0;font-size:45px; line-height: 48px; color: #ffffff; font-family: Arial, Myriad, Helvetica, sans-serif;text-decoration: none;font-weight: bold;" class="heroTxt"&gt;We will&lt;br&gt;do something&lt;br&gt;really amazing.&lt;/p&gt;
                              &lt;/td&gt;
                           &lt;/tr&gt;
                         &lt;/table&gt;
  
                    &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;       
  </code></pre>
  
  <p>The background css parts ar:</p>
  
  <pre><code>&lt;style&gt;
  .deviceWidth {
  width:100% ;
  height:auto 
  }
  #heroImg {
  display:block;
  background-image:url("http://not.real.path/something.jpg");
  width:100%;
  height: 250px;
  padding:0;
  }
  .heroTxt {
  font-size: 38px ;
  line-height: 40px ;
  }
  .heroTxtTbl {
  width: 80% ;
  float: left;
  margin:50px 5px 10px 25px;
  display:block;
  }
  .heroTxtEmp {
  font-size: 17px ;
  line-height: 22px ;
  }
  #txtCntr {
  padding:5px;
  }
  </code></pre>
  
  <p>Thanks in advance for any help</p>