Search code examples
htmlcsshtml-email

Move background to the left css

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:

enter image description here

</head>
        <body style="padding: 0 25px;background: linear-gradient(to bottom, red 80px, black 0%) no-repeat top / auto;background-size: 900px 1020px;">
<header>
Solution

  • 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:

    • Don't set a width greater than about 280px (or less if you have padding). Mobiles won't be responsive with that.
    • Linear-gradient could work on some platforms, but not on others. For this gradient, which is not even a gradual change, use the bgcolor attribute or background-color style.
    • You may have issues with the <body> tag, as it gets replaced or used weirdly in different email clients. Put your work in a table.
    • Don't use <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;">&nbsp;</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>