发出背景图片邮件

时间:2015-04-19 06:19:32

标签: html css image gmail

我无法解决gmail中时事通讯背景图片的问题。 在雅虎,webmail中bgimage是居中的,但是gmail一直将它对齐到屏幕的左边! 我尝试了几个代码,但没有任何作用。

我该怎么做才能解决它?

由于

这是代码

    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>

    <title>Newsletter</title>

    <style type="text/css">

        body{
            width: 100%; 
            background-color: #ffffff; 
            margin:0; 
            padding:0; 
            -webkit-font-smoothing: antialiased;
            mso-margin-top-alt:0px; mso-margin-bottom-alt:0px; mso-padding-alt: 0px 0px 0px 0px;
        }

        p,h1,h2,h3,h4{
            margin-top:0;
            margin-bottom:0;
            padding-top:0;
            padding-bottom:0;
        }

        span.preheader{display: none; font-size: 1px;}

        html{
            width: 100%; 
        }

        table{
            font-size: 14px;
            border: 0;
        }

        /* ----------- responsivity ----------- */

        @media only screen and (max-width: 798px){
            body[yahoo] .hide-800{display: none !important;}
            body[yahoo] .container800{width: 100% !important;} 
            body[yahoo] .container800_img{width: 40% !important;}
            body[yahoo] .section800_img img{width: 100% !important; height: auto !important;}
            body[yahoo] .half-container800{width: 55% !important;}  
        }

        @media only screen and (max-width: 640px){

            /*------ top header ------ */   
            body[yahoo] .main-header{font-size: 20px !important;}
            body[yahoo] .main-section-header{font-size: 30px !important;}
            body[yahoo] .show{display: block !important;}
            body[yahoo] .hide{display: none !important;}
            body[yahoo] .align-center{text-align: center !important;}

            /*----- main image -------*/
            body[yahoo] .main-image img{width: 440px !important; height: auto !important;}

            /* ====== divider ====== */
            body[yahoo] .divider img{width: 440px !important;}

            /*--------- banner ----------*/
            body[yahoo] .banner img{width: 440px !important; height: auto !important;}
            /*-------- container --------*/         
            body[yahoo] .container590{width: 440px !important;}
            body[yahoo] .container580{width: 400px !important;}
            body[yahoo] .container800{width: 440px !important;}
            body[yahoo] .container800_img{width: 100% !important;}
            body[yahoo] .section800_img img{width: 80% !important;}
            body[yahoo] .half-container{width: 220px !important;}
            body[yahoo] .main-button{width: 140px !important;}

            /*-------- secions ----------*/
            body[yahoo] .section-item{width: 440px !important;}
            body[yahoo] .section-img img{width: 300px !important; height: auto !important;}        
        }

        @media only screen and (max-width: 479px){
            /*------ top header ------ */
            body[yahoo] .main-header{font-size: 20px !important;}
            body[yahoo] .main-section-header{font-size: 26px !important;}
            /*----- main image -------*/
            body[yahoo] .main-image img{width: 280px !important; height: auto !important;}

            /* ====== divider ====== */
            body[yahoo] .divider img{width: 280px !important;}
            body[yahoo] .align-center{text-align: center !important;}

            /*--------- banner ----------*/
            body[yahoo] .banner img{width: 280px !important; height: auto !important;}
            /*-------- container --------*/         
            body[yahoo] .container590{width: 280px !important;}
            body[yahoo] .container580{width: 260px !important;}
            body[yahoo] .container800_img{width: 100% !important;}
            body[yahoo] .section800_img img{width: 80% !important;}
            body[yahoo] .half-container800{width: 55% !important;}
            body[yahoo] .wide-iphone{width: 210px !important;}
            body[yahoo] .half-container{width: 200px !important;}
            body[yahoo] .main-button{width: 200px !important;}

            /*-------- secions ----------*/
            body[yahoo] .section-item{width: 280px !important;}
            body[yahoo] .section-item-iphone{width: 280px !important;}
            body[yahoo] .section-img img{width: 280px !important; height: auto !important;}  
            body[yahoo] .section-iphone-img img{width: 280px !important; height: auto !important;}

            /*------- CTA -------------*/

            body[yahoo] .cta-btn img{width: 260px !important; height: auto !important;}
        }

    </style>
</head>


<body yahoo="fix" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 



    <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="dce0ec" style="background-image: url(http://www.tripleacomunicacion.com/sofibio/images/minceur.jpg); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; background-position: center;" background="http://www.tripleacomunicacion.com/sofibio/images/minceur.jpg" class="main-bg">

        <tbody><tr><td height="50" style="font-size: 50px; line-height: 50px;">&nbsp;</td></tr>

        <tr>
            <td align="center">
                <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">

                    <tbody><tr>
                        <td align="center">
                            <table border="0" width="590" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container580">
                                <tbody><tr>

                                    <td width="25%" align="left" mc:edit="nav1" style="color: rgb(33, 42, 46); font-size: 12px; font-family: 'Varela Round', Calibri, sans-serif; line-height: 22px;" class="title_color hide">
                                        <!-- ======= section text ====== -->

                                        <div class="editable_text" style="line-height: 22px">
                                            <span class="text_container"><a href=""></a></span>
                                        </div>
                                    </td>

                                    <td width="50%" align="center">
                                        <table border="0" align="center" cellpadding="0" cellspacing="0" class="container590">
                                            <tbody><tr>
                                                <td align="center">
                                                    <a href="https://instagram.com" style="display: block; border-style: none !important; border: 0 !important;" class="editable_img"><img editable="true" mc:edit="logo" width="65" border="0" style="display: block; width: auto;" src="" alt="logo" class=""></a>
                                                </td>
                                            </tr>
                                        </tbody></table>
                                    </td>

                                    <td width="25%" align="right" mc:edit="nav2" style="color: rgb(84, 90, 92); font-size: 12px; font-family: 'Varela Round', Calibri, sans-serif; line-height: 22px;" class="text_color hide">
                                        <!-- ======= section text ====== -->

                                        <div class="editable_text" style="line-height: 22px">
                                            <span class="text_container"><p><span style="font-size:11px">Newsletter</span></p>
</span>
                                        </div>
                                    </td>
                                </tr>

                            </tbody></table>

                        </td>
                    </tr>

0 个答案:

没有答案