How make background image on newsletter in outlook

Question

I m trying to make newsletter where I have some image as background and text on it  This is easy but I need this to work on Ms Outlook   What I have tried   1    lt td width  100  height  100  style  background  url  someurl     gt text lt  td gt    2    lt td width  100  height  100  background  someurl  gt text lt  td gt    3    lt td width  100  height  100  gt       lt div style  width  0px  height 0px  position  relative   gt           lt div style  width  100px  height  100px  position  absolute  background  url  someurl    gt             text          lt  div gt       lt  div gt   lt  td gt    But nothing works well on outlook  I have no idea how fix it  I m using outlook 2007    Any help would be appreciated

User · Answer

The only way I was able to do this is via this code (TD tables). I tested in outlook client 2010. I also tested via webmail client and it worked for both.

The only things you have to do is change your_image.jpg (there are two instances of this for the same image make sure you update both for your code) and #your_color.

<td bgcolor="#your_color" background="your_image.jpg">

<!--[if gte mso 9]>

<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="your_image.jpg"/>

<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'>

<![endif]-->

<p>Text over background image.</p>

<!--[if gte mso 9]>

</v:shape>

<![endif]-->

</td>

source

User · Answer

Background DOES work in Outlook  but only in the  lt body gt  tag of the email  It won t work in individual  lt td gt  s  only the whole email       UPDATE  Alternatively you can use the VML method which allows you   to add background images to individual page elements in Outlook    This works in most clients including Outlook    lt body style  background-image  url  img jpg     gt   lt table width  100   background  img jpg  gt    Here is the full code that works in all major email clients including Outlook  It has background-image set with fallback to background in a 100  width table     lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt   lt title gt  lt  title gt   lt  head gt     lt body style  margin  0px  padding  0px  background-image  url  http   lorempixel com output food-q-c-100-100-7 jpg    background-color   0D679C  background-position  top center   bgcolor   0D679C  gt     lt  -- BODY FAKE PANEL -- gt       lt table width  100   border  0  align  center  cellpadding  0  cellspacing  0  background  http   lorempixel com output food-q-c-100-100-7 jpg  gt         lt tr gt           lt td gt           lt  -- CENTER FLOAT -- gt             lt table width  800  border  0  valign  top  align  center  cellpadding  0  cellspacing  0  bgcolor   FFFFFF  gt               lt tr gt                 lt td height  1000  align  center  valign  middle  gt                  Center panel                lt  td gt               lt  tr gt             lt  table gt           lt  --  CENTER FLOAT -- gt           lt  td gt         lt  tr gt       lt  table gt     lt  --  BODY FAKE PANEL -- gt     lt  body gt   lt  html gt

User · Answer

You can use the code below     lt  -- if gte mso 9  gt   lt v rect xmlns v  urn schemas-microsoft-com vml  fill  true  stroke  false   style  width  700px  height  460px   gt   lt v fill type  tile  src  images feature-background-01 png  color   333333    gt      lt v textbox inset  0 0 0 0  gt                                    lt   endif -- gt    Note  Include this code above the table for which the background image is needed  Also  add the closing tag mentioned below  after the closing tag of the table    lt  -- if gte mso 9  gt         lt  v textbox gt         lt  v rect gt   lt   endif -- gt

User · Answer

Not all HTML and CSS is supported by Microsoft Office products  Outlook in particular  take a look here for reference on supported elements for what you can and can t use in Outlook when rendering HTML   Specifically  from that link it doesn t state the background CSS property is supported for div elements  You might have to use an img and do some hacky layering   Note that in your second example you have a quote mismatch  which won t help any   Lastly and something I just came across at the link provided is the Outlook HTML and CSS Validator tool - you could try running that against your newsletter markup and see if it gives you any suggestions alternatives

User · Answer

There is something explained here    https   web archive org web 20140608170948 http   www campaignmonitor com 80 blog post 3363 updated-applying-a-background-image-to-html-email

User · Answer

you cannot add a background image to an html newsletter which is to be viewed in outlook  It just wont work  as they ignore the property   You can only have block colours  background-color  behind text    Outlook doesn t support the following CSS   azimuth background-attachment background-image background-position background-repeat border-spacing bottom caption-side clear clip content counter-increment counter-reset cue-before  cue-after  cue cursor display elevation empty-cells float font-size-adjust font-stretch left line-break list-style-image list-style-position marker-offset max-height max-width min-height min-width orphans outline outline-color outline-style outline-width overflow overflow-x overflow-y pause-before  pause-after  pause pitch pitch-range play-during position quotes richness right speak speak-header speak-numeral speak-punctuation speech-rate stress table-layout text-shadow text-transform top unicode-bidi visibility voice-family volume widows word-spacing z-index   Source  http   msdn microsoft com en-us library aa338201 aspx  UPDATE - July 2015  I thought it best to update this list as it gets the odd upvote every now and then - a great link to current email client support is available here  https   www campaignmonitor com css

User · Answer

You can use it only in body tag or in tables  Something like this    lt table width  100   background  YOUR IMAGE URL  style  STYLES YOU WANT  i e  background-repeat   gt    This worked for me

User · Answer

Background image is not supported in Outlook  You have to use an image and position it behind the text using position relative or absolute

User · Answer

Powerful tool for  Bulletproof Email Background Images   VML for Outlook 2007 2010 2013  and HTML CSS for Outlook 2000 2003  Gmail  Hotmail      http   emailbg net  as an exemple         lt div style  background-color  f6f6f6   gt     lt  -- if gte mso 9  gt     lt v background xmlns v  urn schemas-microsoft-com vml  fill  t  gt       lt v fill type  tile  src  http   i imgur com n8Q6f png  color   f6f6f6   gt     lt  v background gt     lt   endif -- gt     lt table height  100   width  100   cellpadding  0  cellspacing  0  border  0  gt       lt tr gt         lt td valign  top  align  left  background  http   i imgur com n8Q6f png  gt         lt  td gt       lt  tr gt     lt  table gt   lt  div gt    in order to have the specified background image to Full email body   This link help to use the Vector Markup Language  VML   msdn microsoft com en-us library bb264137 28v vs 85 29 aspx  www w3 org TR NOTE-VML  Toc416858389

User · Answer

I had exactly this problem a couple of months ago while working on a WYSIWYG email editor for my company  Outlook only supports background images if they re applied to the  lt body gt  tag - any other element and it ll fail   In the end  the only workaround I found was to use  lt div gt  element for text input  then during the content submission process I fired an AJAX request with the  lt div gt  s content to a PHP script which wrote the text onto a blank version of our header image  saved the file and returned its  uniquely generated  name  I then used Javascript to remove the  lt div gt  and add an  lt img gt  tag using the returned filename in the src attribute   You can get all the info methodology from the imagecreatefrompng   page on the PHP Docs site

[html] How make background image on newsletter in outlook?

Examples related to html

Examples related to background

Examples related to outlook

[html] How make background image on newsletter in outlook?

Examples related to html

Examples related to background

Examples related to outlook

Examples related to newsletter