Comments on: Background Images and CSS in HTML Email

By: Stuart shields

Stuart shields — Mon, 23 Jan 2012 05:55:30 +0000

I’d suggest not using Michael’s solution with inline css as it breaks.

By: Andy Ciordia

Andy Ciordia — Sat, 19 Nov 2011 01:26:35 +0000

Mail.app renders backgrounds, Gmail renders backgrounds if allowed. I’d like to see more image integration as more browsers allow or at least seem to permit more. There is no real media viewer/editor/uploader outside of adding images to posts.

* Add a Media manager tab for quicker CRUD tasks.
* Add a way in the Editor/Code UI to upload an image
* Allow images with HTML import uploads (zip it or such)

Some ideas for furthering the integrations. Not all need be met to make things more fluid.

By: Bert Terpstra

Bert Terpstra — Wed, 09 Nov 2011 21:02:29 +0000

Instead of background-image:url(‘bei_bodybg.png’); you should specify the locations of the image by a full path name. Something like:
background-image:url(‘http://mywebsite.com/bei_bodybg.png‘); and of course you must replace ‘mywebsite.com’ by your website domain.

By: Nayeema

Nayeema — Sat, 22 Oct 2011 06:57:03 +0000

I am failed to use my own template with background.
At first i downloaded the templates friom mailchimp as a zip file. then i choose one template and edit it. i have just used a background image.
my project folder is web1. it has two sub file-> template.html and a golder images. the images folder contains the bg image.
in template css i wrote:
#backgroundTable{
background-color:#fff2db;
background-image:url(‘bei_bodybg.png’);
background-repeat:repeat-x;
}
then i zipped the main folder and uploaded it following mailchimp instructions. locally it works nice. but on mailchipm the image is not found.
pls help me about it. i want upload my full template with images.

By: Shawn Si

Shawn Si — Wed, 03 Aug 2011 20:48:48 +0000

You can make background image work using redundant method as below. It works on all the email clients I could test on including outlook2007. Hope this helps.

1. Create a “div” wrapper with the image background.
2. Create a content container, such as “table”, with the same image background using both “background” and “style” properties.

Example:
-div style=”width:100%;background:#42386d url(‘http://fullimagepath‘) repeat;margin:0px;”
-table width=”697″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ background=”http://fullimagepath” style=”width:100%;background:#42386d url(‘http://fullimagepath‘) repeat;”

By: Brian Thies

Brian Thies — Wed, 27 Jul 2011 19:05:12 +0000

The Outlook 2007/2010 background image fix: http://www.campaignmonitor.com/forums/viewtopic.php?id=3862

By: Engr Gulsher

Engr Gulsher — Tue, 12 Jul 2011 11:31:32 +0000

Hello All I am facing problem in Email Template
Background image is not showing in outlook 2007 please help me if any one know…

By: bob adams

bob adams — Sat, 25 Jun 2011 18:33:57 +0000

very useful thx

By: Andrew

Andrew — Tue, 17 May 2011 14:40:03 +0000

@Conrad Corpus says:
The problem is that since the launch of Outlook 2007 there is no support for background-image or -url support when creating the email format so you are right in saying that many different mail clients will display this differently.

By: Conrad Corpus

Conrad Corpus — Wed, 27 Apr 2011 15:18:01 +0000

I’m working on a client’s newsletter and they would like to have their left sidebar filled with a gray gradient that fades from dark to light, left to right. That same sidebar will also contain text content and small images. However, as far as I know, gradients are poorly supported across email clients. Thoughts? Thanks!