Background Images Not Working In Email

[glenelkins]

Hi

 

I have put together an email in CSS but when its sent to HOTMAIL or GMAIL etc none of the background images work. Its got me really stumped

 

<style type="text/css">
/* Global Resets */
html, body, ul, li, h1, h2, h3, fieldset, div, p, span {

margin: 0px;
padding: 0px;

}

body {

font-family: "Trebuchet MS", Verdana,Arial, serif;
font-size: 62.5%;

}

/* Main Container */
#main_container {

width: 100%;

}

/* Inner Container */
#inner_container {

margin: auto;

width: 600px;

}

/* Header Container */
#header_container {

width: 600px;
height: 167px;

background: url('http://www.adverset.co.uk/shots/paper/images/topbg.png') no-repeat;

}

/* Content */
#content_container {

width: 600px;
height: 512px;

background: url('http://www.adverset.co.uk/shots/paper/images/mainbg.png') no-repeat;

}

#content { margin-left: 144px; width: 430px; height: 276px;  }
	#content p { font-size: 1.3em; color: #dcd6d6; margin-bottom: 11px; }
	#content h1 { font-size: 1.7em; color: #f29400; margin-bottom: 15px; }
#content2 { margin-left: 144px; width: 430px; height: 217px; padding-top: 20px; /*background: green;*/ }
	#content2 ul { list-style-image: url('http://www.adverset.co.uk/shots/paper/images/bullet.gif'); }
	#content2 li { margin-left: 16px; margin-bottom: 9px; font-size: 1.3em; color: #FFFFFF; }
	.black  { color: #000000; font-weight: bold; }

/* Footer */
#footer_container {

width: 600px;
height: 126px;

border-top: 1px solid #000000;

background: #FFFFFF;

}

#footer_left { float: left; width: 144px; padding-top: 12px; }
#footer_right { float: left; width: 399px; padding-top: 31px;}
	#footer_right p { font-size: 1.2em; margin-bottom: 15px; }
	#footer_right a { color: #f29400; text-decoration: none; }
	#footer_right a:hover { color:#f2940; text-decoration: underline; }
</style>

<div id="main_container">

<div id="inner_container">
    
    	<div id="header_container"></div>
        
        <div id="content_container">
        
		<div id="content">
            	
                <h1>…in 18 months paper prices have increased by 30%</h1>
                
            	<p>…this includes the price rise imminent during January 2009.</p>
			<p>All major paper suppliers have indicated that they are putting in place a 9% paper rise across their whole range of papers. This is due to the 20% fall of the pound against the Euro since the summer, and 25% against the dollar.</p>
			<p>To help protect you from this as much as possible Adverset are prepared not to implement this increase until 1st March 2009. </p>
			<p>All we ask is that you place a Purchase Order with us before this date stating - ‘Paper Price Offer’ on your order.</p>
        		<img src="http://www.adverset.co.uk/shots/paper/images/buy.gif" alt="" />
        	</div>
            
            <div id="content2">
            
            	<ul>
                	<li>Creative designs<br /><span class="black">that get results</span></li>
                    <li>Vibrant colourful print<br /><span class="black">that makes an impact</span></li>
                    <li>Efficient service<br /><span class="black">and on-time delivery for 'peace of mind'</span></li>
                    <li>Extremely competative prices<br /><span class="black">offering great value.</span></li>
                    <li>Benefit from a total in-house design & print solution.</li>
                </ul>
                    
            </div>
            
        </div>
        
        <div id="footer_container">
        	
            <div id="footer_left"><img src="http://www.adverset.co.uk/shots/paper/images/adverset.gif" alt="" /></div>
            
            <div id="footer_right">
            
			<p>CONTACT US: <br />
				<strong>01723 363732</strong> or email <a href="mailto:sales@adverset.co.uk">sales@adverset.co.uk</a></p>

			<p><a href="http://www.adverset.co.uk">adverset</a> are committed to caring for and assisting the environment. 
				For full details please visit: <a href="http://www.adverset.co.uk/green-policy/">adverset.co.uk/green-policy</a></p>
                    
            </div>
            
        </div>
        
    </div>
    
</div>

[rhodesa]

some email clients don't allow CSS. coding emails that work on every client is a pain in the ass. every client has a different standard they allow.

 

i did a quick google search and found this, which is a pretty good guide to making HTML emails:

http://mattmedia.net/2007/08/23/8-html-email-tips-i-wish-i-knew-sooner/

that page also links here, which tells about how gmail doesn't support <style> tags:

http://www.campaignmonitor.com/blog/post/2533/a-guide-to-css-support-in-emai-2/

 

edit: definitely give that stuff a read through, but the general rule is to code like it's Web 1.0. Use tables for layouts, font tags, bgcolor attributes, etc.

[glenelkins]

hi

 

cheers!!! i noticed that it works fine in yahoo though

 

still though, i have tried with the <style> in both body and <head> for Live mail and it does work at all!

[rhodesa]

when i do HTML emails, i don't use any CSS at all....and it still is difficult.

[phparray]

When making html emails you have to turn off the part of your brain that says to do things proper.  Make email clients such as outlook using very old parsing engines and so you have to use very old methods for them to work.  Basically keep the width as small as possible and use inline styles.  Yes I just used the cursed term inline styles but that's what you have to do. 

[rhodesa]

p.s. - here is a more up to date version of what is supported:

http://www.campaignmonitor.com/css/