Растягивание фоновой картинки в HTML-письмах

Люди, знакомые с HTML/CSS, знают о такой возможности, как установка картинки в качестве фона элемента. Они так же знаю, что картинку можно заставить «растягиваться» — многократно повторяться в отведённой области. Делается это довольно просто:

Это позволяет реализовывать неплохие дизайнерские идеи с использованием саморасширяющихся под контент блоков. Работает в большинстве современных браузеров (IE/FF/Opera/Chrom — точно). Но кроме браузеров, отображающих страницы, есть ещё две категории, которые работают с HTML — почтовые вэб-сервисы и почтовые клиенты. И вот именно с этими «ребятами» возникают проблемы.

Большинство почтовых сервисов ради увеличения безопасности, ускорения загрузки или ещё по каким-нибудь причинам (лень разработчиков?) поддерживает использование HTML/CSS в письмах весьма ограниченно. Например, знаменитый gmail не любить свойство CSS background-image. Вообще стоит заметить, что gmail считается наибольшим ненавистником CSS из крупных почтовых сервисов. 😉

«Лечится» такое отношение гмайла при помощи HTML атрибута background:

Ещё хуже дела обстоят в рядах почтовых клиентов, представленных нечистью вроде Outlook, Thunderbird, Windows Mail, Lotus Notes, The Bat! и прочей фауной помельче. Даже в рядах аутлуков нет согласия. Больше всего из «стройной» концепции Microsoft’овских почтовых клиентов выбивается Outlook 2007. В то время, как его старшие братья вполне нормально «едят» последнее приведённое шаманство, наш герой отрицает существование большинства атрибутов HTML и свойств CSS. Например, сколько я ни бился, но так и не смог заставить его «растянуть» фоновую картинку. Вариант с заданием ширины и высоты, естественно, не рассматривается — область динамическая, жаваскрипт запрещён.

Мораль сей басни — учитывайте ограничения сервисов и клиентов при составлении дизайна ваших страниц и писем.

Напоследок дам пару ссылок:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
Guide to CSS support in email clients (2008)

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *