Всем привет.
Сейчас email-подписи стали не то, что очень популярны, а являются неотъемлемой частью практически любого сервиса. И мы говорим не только о триггерных рассылках или спаме… Нет, сюда входит абсолютно любое электронное письмо, которое отправляется в бизнес целях.
Вот и я верстал очередной макет для email-подписи одного из клиентов. И столкнулся с определенной проблемой. Мне необходимо было сделать так, чтобы фоновое изображение тянулось на весь макет. Однако, оказалось, что сделать это не так уж и просто.
Задача, которая была поставлена, в том, чтобы добиться отображения макета, как указано выше на изображении. Однако на практике получилось, что стили CSS для background резались фильтром gmail-сервиса.
Получается, что правило:
background: ulr('/path_to_file') no-repeat 100% 100%;
фильтр обрезает до конструкции
background: ulr('/path_to_file') no-repeat
И на выходе мы получаем что-то подобное этому
Окей, смотрим в сторону альтернативы и более обьемного описания того, чтобы задать размеры и положение фонового изображения, когда каждое правило пишется отдельно
background-image: url('/path_to_file');
background-repeat: no-repeat;
background-position: 100% 100%;
Однако, данная конструкция также обрезается фильтром почтовой системы или фильтром почтового клиента. В итоге мы получаем что-то такого плана:
background-image: url('/path_to_file');
background-repeat: no-repeat;
После некоторого «курения манов» и перелопачивания кучи ссылок и справочной информации, было найдено решение.
Правила для размеров и положения фонового изображения необходимо записывать в виде правила через ‘/’.
background: url('/path_to_file') no-repeat top / 100% auto;
Такую конструкцию пропустит фильтр почтового сервиса и на выходе мы получим то, что требуется.
ЗЫ: также хочу отметить еще иные результаты изучения справочной информации. Для верстки подписи не подходит позиционирование абсолютное и отрицательные margin.
Эти конструкции также будут фильтроваться и обрезаться фильтром почтовой системы.
Итого:
position: absolute;
и
margin-top: -100px;
Не пройдут проверку и будут обрезаны в финальном виде и не будут применены. Это также нужно учитывать.
Всем хорошего и валидного кода.