This HTML works fine in any editor, but when I send a sample email to the gmail based on this html Background moves to the center:
</head>
<body style="padding: 0 25px;background: linear-gradient(to bottom, red 80px, black 0%) no-repeat top / auto;background-size: 900px 1020px;">
<header>
HTML email is 1990's style web design, but with mobile support and some limited opportunity for progressive design. So it's going to need a complete redesign.
Some no no's:
bgcolor attribute or background-color style.<body> tag, as it gets replaced or used weirdly in different email clients. Put your work in a table.<header> and other more modern HTML/CSS, unless you have a fallback for email clients that don't support it.You could start with something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
</head>
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<!-- START OUTER WRAPPER -->
<center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
<!-- END OUTER WRAPPER -->
<!-- START SINGLE COLUMN v1 -->
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
<!-- START TEXT -->
<tr>
<td bgcolor="red" style="border-collapse:collapse;padding:10px;width:100%;text-align:left;height:80px;">
<p style="margin:0;font-size:14px;margin-bottom:10px;"> </p>
</td>
</tr>
<tr>
<td bgcolor="black" style="border-collapse:collapse;padding:10px;width:100%;text-align:left;color:#fff">
<p style="margin:0;font-size:16px;">This is another paragraph. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END SINGLE COLUMN v1 -->
<!-- START OUTER WRAPPER -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
<!-- END OUTER WRAPPER -->
</body>
</html>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);">
<tr>
<td style="color:#ffffff;">In the table, you can give background. Make sure gradient background will not render in Outlook email browser. Instead of linear background, you can give image in the background. </td>
</tr>
</table>
</body>