I have created fully responsive email and inlined styles using inky inliner but it seems like gmail is cutting url('content url'). I dont see the images on the top and bottom of the email. Here is the code of email:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<link rel="stylesheet" type="text/css" href="css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Сборка календарей на 2019 год от типографии Асса</title>
<!-- <style> -->
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST", location.hostname));
//]]></script><script async="" src="/browser-sync/browser-sync-client.js?v=2.26.3"></script>
<!--[if gte mso 10]>
<v:rect style="width: значение; height: значение;" strokecolor="none">
<v:fill type="tile" src="картинка"></v:fill>
</v:rect>
<v:shape style="position: absolute; width: значение; height: значение;">
<![endif]-->
<!--[if gte mso 10]>
</v:shape>
<![endif]-->
<span class="preheader"></span>
<table class="body">
<tbody><tr>
<td class="center" align="center" valign="top">
<center data-parsed="">
<table class="spacer float-center"><tbody><tr><td height="90px" style="font-size:90px;line-height:90px;"> </td></tr></tbody></table>
<table style="background:rgb(255, 255, 255)" align="center" class="container float-center"><tbody><tr><td>
<table class="row"><tbody><tr>
<th class="small-12 large-12 columns first last" style="background:url('http://cartonbox.com.ua/images/email/dist/assets/img/top.png'); background-size:100% 100%;"><table><tbody><tr><th>
<table class="spacer"><tbody><tr><td height="120px" style="font-size:120px;line-height:120px;"> </td></tr></tbody></table>
</th>
<th class="expander"></th></tr></tbody></table></th>
</tr></tbody></table>
<table class="row"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tbody><tr><th>
<h3 class="text-center" style="color:rgb(20,20,210);font-weight:900;letter-spacing:0;padding:0;margin:0;line-height:1;">ТОЛЬКО ДЛЯ ТИПОГРАФИЙ</h3>
<h3 class="text-center" style="color:rgb(20,20,210);font-weight:900;letter-spacing:0;padding:0;margin:0;">И РЕКЛАМНЫХ АГЕНСТВ</h3>
Для тех, кому важно решить подобную проблему, кто находится в поиске надежного партнера.<br>
Мы подготовили специальное предложение по сборке тиражей календарей на 2019 год.<br>
Мы не понаслышке знаем: Какие цвета чаще пружины заказывают в предновогодний период?<br>
Что выгоднее устанавливать люверс или курсор?<br>
Как собрать 1000 календарей на 3 пружины за 1 день?<br>
Ведь мы на своем опыте прошли путь ручных процессов.<br>
Мы автоматизировали все, связанное со сборкой!<br>
Специально для вас приготовлены пружины разных цветов и размеров, чтобы гарантировать сроки производства.<br>
Теперь с радостью предлагаем вам воспользоваться нашими достижениями и значительно восполнить объем продукции и соответственно своей прибыли, размещая заказ на сборку календарей у нас.
Пробный прайс<br>
мы вышлем по вашему запросу<br>
Пишите, звоните! Мы будем рады быть полезными Вам.
<center style="margin-top:40px;" data-parsed="">
<table class="button large text-center float-center"><tbody><tr><td><table><tbody><tr><td>
<a href="">узнать стоимость</a>
</td></tr></tbody></table></td></tr></tbody></table>
</center>
<table class="spacer"><tbody><tr><td height="16px" style="font-size:16px;line-height:16px;"> </td></tr></tbody></table>
</th>
<th class="expander"></th></tr></tbody></table></th>
</tr></tbody></table>
<table style="width:100%!important" "="" class="row"><tbody><tr>
<th class="small-12 large-6 columns first last" style="font-weight:900;padding:0!important;margin:0"><table><tbody><tr><th>
</th><th class="text-center; small-2 large-2 columns first" style="font-weight:900;padding:0!important;margin:0"><table><tbody><tr><th>
</th></tr></tbody></table></th>
<th class="text-center; small-4 large-4 columns" style="font-weight:900;padding:0!important;margin:0"><table><tbody><tr><th>
<p style="color:#100793 !important;padding:0 0 10px 0;margin:0 0 0">Заник Екатерина</p>
</th></tr></tbody></table></th>
<th class="text-center; small-2 large-2 columns last" style="font-weight:900;padding:0!important;margin:0"><table><tbody><tr><th>
</th></tr></tbody></table></th>
</tr></tbody></table></th>
</tr></tbody></table><table style="margin:0;padding:0;" class="row"><tbody><tr>
<th class="small-12 large-12 columns first last" style="background:url('http://cartonbox.com.ua/images/email/dist/assets/img/footer.png');background-size:100% 100%"><table><tbody><tr><th>
<table class="spacer"><tbody><tr><td height="110px" style="font-size:110px;line-height:110px;"> </td></tr></tbody></table>
</th><th class="text-center small-3 large-3 columns first"><table><tbody><tr><th>
</th></tr></tbody></table></th>
<th class="text-center small-7 large-7 columns"><table><tbody><tr><th>
исполнительный директор<br>
Типографии АССА
</th></tr></tbody></table></th>
<th class="text-center small-2 large-2 columns last"><table><tbody><tr><th>
</th></tr></tbody></table></th>
<th class="expander"></th></tr></tbody></table></th>
</tr></tbody></table>
</td></tr></tbody></table></center></td></tr></tbody></table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body></html>
I would like to find the article or google current restrictions or Zurb doc about google backgound url rules. Did anybody use foundation email builds for gmail? Regards, Maksym
You can use the
backgroundattribute on the table cells like this.Campaign Monitor made a nice tool that generates code for you here: https://backgrounds.cm/