Изображение как фон для email-подписи

Всем привет.

Сейчас email-подписи стали не то, что очень популярны, а являются неотъемлемой частью практически любого сервиса. И мы говорим не только о триггерных рассылках или спаме… Нет, сюда входит абсолютно любое электронное письмо, которое отправляется в бизнес целях.

Вот и я верстал очередной макет для email-подписи одного из клиентов. И столкнулся с определенной проблемой. Мне необходимо было сделать так, чтобы фоновое изображение тянулось на весь макет. Однако, оказалось, что сделать это не так уж и просто.

CSS для background-image для email-подписи

Задача, которая была поставлена, в том, чтобы добиться отображения макета, как указано выше на изображении. Однако на практике получилось, что стили CSS для background резались фильтром gmail-сервиса.

Получается, что правило:

background: ulr('/path_to_file') no-repeat 100% 100%;

фильтр обрезает до конструкции

background: ulr('/path_to_file') no-repeat

И на выходе мы получаем что-то подобное этому

Вставка фона изображением в email-подпись

Окей, смотрим в сторону альтернативы и более обьемного описания того, чтобы задать размеры и положение фонового изображения, когда каждое правило пишется отдельно

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;

Не пройдут проверку и будут обрезаны в финальном виде и не будут применены. Это также нужно учитывать.

Всем хорошего и валидного кода.

Добавить комментарий