SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Background imgs in HTML email

    HI all,
    I was wondering if anyone has successfully coded an HTML email with a background img?

    Im reading sitepoints article:
    http://articles.sitepoint.com/articl...-newsletters/2

    But when i use the table background attribute, it doesnt work.
    <table width="600" border="0" cellpadding="0" cellspacing="0" background="http://www.beyondyourdreams.co.uk/header.jpg">

    Im sending from outlook 2007 by going
    new msg - insert/attach file - finding the html file and insert as text..

    If anyone has solved this headache, please let me know!
    Thankyou!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Don't quote me on this but as far as I am aware, most email providers automatically filter out background images and do not allow them within HTML mail. One thing about HTML email is that you are very limited in what you can achieve, support for HTML and CSS (especially) within clients is very low (at the same level browsers were at 10 years ago). Honestly I am not sure you are going to be able to achieve the background image you are after.

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quoted from uri:
    Define the background color in a td cell with the bgcolor attribute, not the CSS style.

    As noted above, use the background attribute in the td cell for background images instead of using CSS. One side-effect of this approach is that the background image can be made as tall as needed -- if the content used in your email template is likely to vary in size, using an extra-tall background image in this way allows the height of the email shrink or expand, depending on the height of the copy, from one email to the next. Remember, though, that Outlook 2007 ignores background images completely.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,811
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For images to show up in emails you need the images to be embedded in the email itself. Many people have linked images in emails disabled so as to prevent their email address getting logged when they accidentally open a spam email containing a link to a 1x1 transparent image used to record email addresses so that lots more spam can be sent to those who actually open them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Outlook 2007 does not support background images at all.

    99.9999&#37; of all other email clients do, but not Outlook 2007.

  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Lincolnshire, UK
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out Campaign Monitor's "Guide to CSS support in email clients".

    www campaignmonitor com /css/

    And also MailChimp

    www mailchimp com /resources/

    Very useful indeed.

    Sorry, you'll have to fill in the dots and delete spaces until I get past sitepoint's 5 post minimum limit before I can post URLs.

  7. #7
    SitePoint Enthusiast phillip_davies's Avatar
    Join Date
    Dec 2009
    Location
    Cheltenham, UK
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Background images are possible in outlook 2007 although it is a pain to do. Basically you need to style a background image on the body of the document in the head and then add the table background property.

    The background image on the body also needs to be massive as it will always repeat reguardless of any rules you add. Also if they reply to your email the background image will show in their email. I find it saves a lot of hassel to try and design emails without text over images!

    Although I've never sent a html email using the method you descibed so this may not actually work (outlook is wierd!)

  8. #8
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm..looks like it cant be done..
    Well if anyone looks at this thread and has successfully done this for gmail/outlook/hotmail, post the html!

    thanku!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  9. #9
    SitePoint Enthusiast phillip_davies's Avatar
    Join Date
    Dec 2009
    Location
    Cheltenham, UK
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it can be done dude, the method i use works in outlook 2003 / 07, hotmail etc (probably not lotus notes)

    Code:
    <html>
    <head>
    
    <style media="all" type="text/css">
    table img
    {
    display:block;
    }
    
    a img
    {
        border: none;
    }
    
    body
    {
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        color:#000000;
    	background-color:#cccccc;
        background-image: url(your large bg);
    }
    
    </style>
    </head>
    <body bgcolor="#ffffff" leftmargin="10" topmargin="15">
    <table width="98%" border="0" cellspacing="0" cellpadding="0">
        <tr>
    	<td align="left" valign="top">
    	    <table cellpadding="0" cellspacing="0" width="550" height="900" background="your small background">
    			    <tr>
    				<td>
    
    				</td>
    			</tr>
    			</table>
    	</td>
        </tr>
    </table>
    </body>
    </html>
    but there are a few drawbacks like having to do a really big background image to stop the repeat, if they reply directly to your email the background will be styled onto their email as well and the general fiddly-ness of it all.

    Also we send our emails out with a mail() function I'm sure it will be fine doing it the way you are I've just never done it that way so cannot 100% say it will work!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •