Background image for email template

Designing a email template might be tought, as the email template need to be done in table approach not the regular divs , i found that the fatest way to do it with dreamweaver also you could use any editor you may want to use .

Note: i had a problem that i have a background image for the body of the email template if i add it to the css like ( background: url(path) ) that would not work

Note: you could use mail chimp to send test emails and test the emails template u have done ( http://kb.mailchimp.com/article/why-should-i-send-tests-of-my-campaign-it-looks-good-in-the-preview )

http://mailchimp.com/ )

the best way i found for solving that is to use the following : http://emailbg.net/

that allow us to to add a background to the email , so

  1. i upload the bg image to my server
  2. replace the link for the bg with mine
  3. put the code prvovided as in the link

you way refer also to this question : http://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook

Advertisements

Good video for the chrome developer toolbar

Background Image across browsers ?

you may look for the following link :

Updated : 

I tried the jquery plugin and it worked fine with all browsers

01/11/2013

To add Ribbon or image on the top corner of page ?

To add picture to the right top corner of the website — Just change the path below

<img border=”0″ id=”corner-ad” src=”http://example.com/path/image.jpg&quot; width=”222″ height=”111″ />
<style>
#corner-ad
{

display: block;

width: 222px;

height: 111px;

position: fixed;

top: -16px;

right: -70px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

#corner-ad
{

top: -80px\9;

right: -70px\9;

*right: -70px;

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);

-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(SizingMethod=’auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)”;

zoom: 1;

}

</style>