Would anybody know how to possibly get this email template to work in Gmail and Yahoo mail?
I designed a template where there is a background image, middle image (that stays in place as you scroll), and a foreground image.
This works for the most part in Dreamweaver but on a test send to Gmail it was taking the images and stacking them vs overlaying them.

<html>
<head>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport"/>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
</head>
<body>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
@import url(https://fonts.googleapis.com/css?family=Muli);

body {
background: #FFFFFF;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
font-family: Franklin Gothic Medium,
'Franklin Gothic Medium',
Futura Condensed Bold,
'Futura Condensed Bold',
'Arial Narrow',
Helvetica,
sans-serif;
font-stretch: condensed;
}

.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}

.backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}

img {
outline: none;
text-decoration: none;
display: block;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}

p {
margin: 1em 0;
}

table td {
border-collapse: collapse;
}

table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
.address a {
color: #000001 !important;
}

.relative {
position: relative !important;
}
.fixed1 {
z-index: 300;
}
.bottom {
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
}
.top {
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
}
.top-elements {
z-index: 600 !important;
}
.middle-elements {
z-index: 500 !important;
}
.btm-elements {
z-index: 600 !important;
}
.bottom {
background: url('https://mediaxfr.s3.amazonaws.com/jei0mckvwc5gemu7u474qx7nunno/mg0Wh02DME.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
height: 4489px !important;
}
.top {
background: url('https://mediaxfr.s3.amazonaws.com/ymt3sbxlsqheitrjkm4gdkrpqp6h/HxfsNbotnA9.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
height: 4489px !important;
}
.characters {
background: url('https://mediaxfr.s3.amazonaws.com/n9z4mybxgqyizdfoaiwxtlpitec5/8YOiXc0Pyp.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 300;
width: 600px !important;
position: fixed !important;
top: 0px !important;
height: 4489px !important;
}
.wrapper {
height: 4489px !important;
}
body[yahoo] .cta {
width: auto !important;
}

@media screen {
.fjalla {
font-family: 'Fjalla One',
Franklin Gothic Medium,
'Franklin Gothic Medium',
Futura Condensed Bold,
'Futura Condensed Bold',
'Arial Narrow',
Helvetica,
sans-serif !important;
font-weight: normal !important;
letter-spacing: normal !important;
}
.muli {
font-family: 'Muli', Helvetica, Arial, sans-serif !important;
}
}

@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
body[yahoo] {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
body[yahoo] .deviceWidth {
width: 100% !important;
min-width: 320px !important;
height: auto !important;
padding: 0 !important;
float: none !important;
}
body[yahoo] .mobile-hide {
display: none !important;
}
body[yahoo] .mobile-txt {
padding: 0 15px !important;
}
body[yahoo] .center-img {
display: block !important;
float: none !important;
margin: 0 auto !important;
background-color: transparent;
}
body[yahoo] .preheader {
padding: 5px 25px !important;
text-align: center !important;
}
body[yahoo] .crunch-desc {
height: auto !important;
padding: 0 0 15px !important;
}
body[yahoo] .address {
padding: 15px !important;
}
body[yahoo] .cta {
width: auto !important;
}
.relative {
position: relative !important;
}
.hero {
background-size: 100% auto !important;
height: auto !important;
}
.android-characters {
width: 100% !important;
margin: -40px 0 0 !important;
}
.offer-headline {
font-size: 40px !important;
line-height: 42px !important;
}
}
@media only screen and (max-device-width: 360px) {
.fixed1 {
position: fixed !important;
top: 115px !important;
z-index: 300;
width: 100%;
}
.bottom {
background: url('https://mediaxfr.s3.amazonaws.com/jei0mckvwc5gemu7u474qx7nunno/mg0Wh02DME.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
height: 2692px !important;
}
.characters {
background: url('https://mediaxfr.s3.amazonaws.com/n9z4mybxgqyizdfoaiwxtlpitec5/8YOiXc0Pyp.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 300;
width: 100% !important;
position: fixed !important;
top: 115px !important;
height: 2692px !important;
}
.top {
background: url('https://mediaxfr.s3.amazonaws.com/ymt3sbxlsqheitrjkm4gdkrpqp6h/HxfsNbotnA9.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
height: 2692px !important;
}

body[yahoo] .wrapper {
height: 2692px !important;
}
body[yahoo] .iphone-hide {
display: none !important;
}
}

@media only screen and (min-device-width: 361px) and (max-device-width: 411px) {
.fixed1 {
position: fixed !important;
top: 115px !important;
z-index: 300;
width: 100%;
}
.bottom {
background: url('https://mediaxfr.s3.amazonaws.com/jei0mckvwc5gemu7u474qx7nunno/mg0Wh02DME.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
height: 3074px !important;
}
.characters {
background: url('https://mediaxfr.s3.amazonaws.com/n9z4mybxgqyizdfoaiwxtlpitec5/8YOiXc0Pyp.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 300;
width: 100% !important;
position: fixed !important;
top: 115px !important;
height: 3074px !important;
}
.top {
background: url('https://mediaxfr.s3.amazonaws.com/ymt3sbxlsqheitrjkm4gdkrpqp6h/HxfsNbotnA9.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
height: 3074px !important;
}

body[yahoo] .wrapper {
height: 3074px !important;
}
body[yahoo] .iphone-hide {
display: none !important;
}
}

@media only screen and (min-device-width: 412px) and (max-device-width: 435px) {
.fixed1 {
position: fixed !important;
top: 115px !important;
z-index: 300;
width: 100%;
}
.bottom {
background: url('https://mediaxfr.s3.amazonaws.com/jei0mckvwc5gemu7u474qx7nunno/mg0Wh02DME.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
height: 3254px !important;
}
.characters {
background: url('https://mediaxfr.s3.amazonaws.com/n9z4mybxgqyizdfoaiwxtlpitec5/8YOiXc0Pyp.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 300;
width: 100% !important;
position: fixed !important;
top: 115px !important;
height: 3254px !important;
}
.top {
background: url('https://mediaxfr.s3.amazonaws.com/ymt3sbxlsqheitrjkm4gdkrpqp6h/HxfsNbotnA9.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
height: 3254px !important;
}

body[yahoo] .wrapper {
height: 3254px !important;
}
body[yahoo] .iphone-hide {
display: none !important;
}
}

/* ----------- iPhone 4 and 4S ----------- */
@media only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) {
.fixed1 {
position: fixed !important;
top: 115px !important;
z-index: 300;
width: 100%;
}
.bottom {
background: url('https://mediaxfr.s3.amazonaws.com/jei0mckvwc5gemu7u474qx7nunno/mg0Wh02DME.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
height: 2392px !important;
}
.characters {
background: url('https://mediaxfr.s3.amazonaws.com/n9z4mybxgqyizdfoaiwxtlpitec5/8YOiXc0Pyp.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 300;
width: 100% !important;
position: fixed !important;
top: 115px !important;
height: 2392px !important;
}
.top {
background: url('https://mediaxfr.s3.amazonaws.com/ymt3sbxlsqheitrjkm4gdkrpqp6h/HxfsNbotnA9.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
height: 2392px !important;
}

body[yahoo] .wrapper {
height: 2392px !important;
}
body[yahoo] .iphone-hide {
display: none !important;
}
}

@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
.fixed1 {
position: fixed !important;
top: 115px !important;
z-index: 300;
width: 100%;
}
.bottom {
background: url('https://mediaxfr.s3.amazonaws.com/jei0mckvwc5gemu7u474qx7nunno/mg0Wh02DME.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
height: 2392px !important;
}
.characters {
background: url('https://mediaxfr.s3.amazonaws.com/n9z4mybxgqyizdfoaiwxtlpitec5/8YOiXc0Pyp.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 300;
width: 100% !important;
position: fixed !important;
top: 115px !important;
height: 2392px !important;
}
.top {
background: url('https://mediaxfr.s3.amazonaws.com/ymt3sbxlsqheitrjkm4gdkrpqp6h/HxfsNbotnA9.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
height: 2392px !important;
}

body[yahoo] .wrapper {
height: 2392px !important;
}
body[yahoo] .iphone-hide {
display: none !important;
}
}

@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) {
.fixed1 {
position: fixed !important;
top: 115px !important;
z-index: 300;
width: 100%;
}
.bottom {
background: url('https://mediaxfr.s3.amazonaws.com/jei0mckvwc5gemu7u474qx7nunno/mg0Wh02DME.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
height: 2804px !important;
}
.characters {
background: url('https://mediaxfr.s3.amazonaws.com/n9z4mybxgqyizdfoaiwxtlpitec5/8YOiXc0Pyp.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 300;
width: 100% !important;
position: fixed !important;
top: 115px !important;
height: 2804px !important;
}
.top {
background: url('https://mediaxfr.s3.amazonaws.com/ymt3sbxlsqheitrjkm4gdkrpqp6h/HxfsNbotnA9.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
height: 2804px !important;
}

body[yahoo] .wrapper {
height: 2804px !important;
}
body[yahoo] .iphone-hide {
display: none !important;
}
}

@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-min-device-pixel-ratio: 3) {
.fixed1 {
position: fixed !important;
top: 115px !important;
z-index: 300;
width: 100%;
}
.bottom {
background: url('https://mediaxfr.s3.amazonaws.com/jei0mckvwc5gemu7u474qx7nunno/mg0Wh02DME.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 100;
width: 100%;
margin: 0 auto;
position: absolute;
height: 3095px !important;
}
.characters {
background: url('https://mediaxfr.s3.amazonaws.com/n9z4mybxgqyizdfoaiwxtlpitec5/8YOiXc0Pyp.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 300;
width: 100% !important;
position: fixed !important;
top: 115px !important;
height: 3095px !important;
}
.top {
background: url('https://mediaxfr.s3.amazonaws.com/ymt3sbxlsqheitrjkm4gdkrpqp6h/HxfsNbotnA9.png')
no-repeat
top
center;
background-size: 100% auto;
z-index: 500;
width: 100%;
margin: 0 auto;
position: absolute;
height: 3095px !important;
}

body[yahoo] .wrapper {
height: 3095px !important;
}
body[yahoo] .iphone-hide {
display: none !important;
}
}
</style>
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0 auto;padding: 0;line-height: 100%;" width="100%">
<tbody>
<tr>
<td valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="top-elements" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0 auto;padding: 0;line-height: 100%; background:#FFFFFF;z-index:600;position:relative;"
width="100%">
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0 auto;padding: 0;line-height: 100%;" width="600">
<tbody>
<tr>
<td valign="top">
<table align="center" bgcolor="#ffec19" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0 auto;padding: 0;line-height: 100%; min-width:600px;" width="600">
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="158" width="600">
<img src="https://mediaxfr.s3.amazonaws.com/iqy13sephevqg0zqyquifkzez1cs/9yDuMDRSEIj.jpg" width="600" height="158" alt="header" style="display:block" />
</td>

</tr>
<tr>
<td height="25" valign="top" />
</tr>
<tr>
<td height="20" valign="top" style="padding:10px; font:Verdana, Geneva, sans-serif; font-size:15px"><div align="center">[CONTENT TEXT.1]</div></td>
</tr>
<tr>
<td height="25" valign="top" />
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="middle-elements" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0 auto;padding: 0;line-height: 100%; background:#FFFFFF; z-index:500;position:relative;"
width="100%">
<tbody>
<tr>
<td valign="top">
<table align="center" bgcolor="#17001d" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0 auto;padding: 0;line-height: 100%; min-width:600px;" width="600">
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td valign="top" class="wrapper">
<div class="relative">
<div class="bottom"> </div>
<div class="characters"> </div>
<div class="top"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="btm-elements" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0 auto;padding: 0;line-height: 100%; background:#FFFFFF;z-index:600;position:relative;"
width="100%">
<tbody>
<tr>
<td valign="top">
<table align="center" bgcolor="#ffec19" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0 auto;padding: 0;line-height: 100%; min-width:600px;" width="600">
<tbody>
<tr>
<td height="25" valign="top" />
</tr>
<tr>
<td class="mobile-hide" height="20" valign="top" style="padding:10px"><div align="center">
<p>
[ARTICLE HEADER.1]
</p>
<p>
[ARTICLE CONTENT.1]
</p>
<p>
<a href="../../Documents/[ARTICLE LINK.1-1]">[ARTICLE LINK TEXT.1-1]</a>
</p></div></td>
</tr>
<tr>
<td height="25" valign="top"> <p align="center">
<a href="[#~unsub_url~#]" style="display:inline-block; font:Verdana, Geneva, sans-serif; font-size:12px; color:#252525">Click here and follow attached instructions to unsubscribe.</a>
</p></td>
</tr>
<tr>
<td height="25" valign="top" />
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>