Картинка, как фон в шаблоне письма

@Nebiross · Регистрация: 07.12.2010

Студворк — интернет-сервис помощи студентам

Всем привет! Учу свой сайт отправлять пользователям письма по мылу, соответственно, формирую шаблон для писем, где в качестве шапки использую div, которому в css в качестве background-image задаю картинку. Так вот, отправляю себе это письмецо, открываю - картинки нет, и даже пустого места, где мол должна была быть картинка тоже нет. Отсюда вопрос, как быть?) Нагуглил что-то страшное и не понятное про какие-то Content-Id и cid, но так ничего конкретного (как сделать) не нашел. Может кто-нибудь сталкивался с подобной задачкой?)

Donald28 · 05.04.2013, 10:06

нужно полностью прописывать путь к картинке, которая должна находиться на твоем сайте и она доступна всем пользователям.

@Nebiross · 05.04.2013, 12:30 **[ТС]**

Ога, только так работает когда картинка с помощью <img src=""> вставляется, а вот когда применяется в качестве фона - нет.

Donald28 · 05.04.2013, 12:48

ну значит вставляй тэг img
и указывай для него

CSS
1
margin-bottom: -200px; /* высота картинки */

@Nebiross · 05.04.2013, 13:42 **[ТС]**

Окей, только тема не об этом.

Donald28 · 05.04.2013, 14:29

ну значит не все почтовые клиенты еще работают со всеми CSS3. Используйте альтернативные способы.

@Academik · 05.04.2013, 14:36

Сообщение от Nebiross

Отсюда вопрос, как быть?

Сделайте имитацию фоновой картинки. То есть вставляем картинку через тег img а далее абсолютом накладываем текст. Примерно так:

CSS
1
2
.header{position: relative; top: 0; width: 400px; height: 200px;}
.header p{position: absolute; top: 15px; left: 15px;}

HTML5
1
2
3
4
<div class="header">
    <img src="http://www.site.ru/images/img.jpg" alt="">
    <p>Содержимое контейнера</p>
</div>

Donald28 · 05.04.2013, 14:38

не факт, что и абсолютное позиционирование поддерживается этим клиентом.

А на другие почтовые сервисы вы отправляли это письмо? приведите html-код письма.

@Academik · 05.04.2013, 14:54

Сообщение от Donald28

не факт, что и абсолютное позиционирование поддерживается этим клиентом.

Я так полагаю он просто обязан подчиняться обычным правилам css.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Nebiross 9 / 9 / 2 Регистрация: 07.12.2010 Сообщений: 98

	Картинка, как фон в шаблоне письма 04.04.2013, 22:21. Показов 8146. Ответов 8 Метки нет (Все метки) Всем привет! Учу свой сайт отправлять пользователям письма по мылу, соответственно, формирую шаблон для писем, где в качестве шапки использую div, которому в css в качестве background-image задаю картинку. Так вот, отправляю себе это письмецо, открываю - картинки нет, и даже пустого места, где мол должна была быть картинка тоже нет. Отсюда вопрос, как быть?) Нагуглил что-то страшное и не понятное про какие-то Content-Id и cid, но так ничего конкретного (как сделать) не нашел. Может кто-нибудь сталкивался с подобной задачкой?) 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	05.04.2013, 10:06
	нужно полностью прописывать путь к картинке, которая должна находиться на твоем сайте и она доступна всем пользователям. 0

@Nebiross 9 / 9 / 2 Регистрация: 07.12.2010 Сообщений: 98
	05.04.2013, 12:30 [ТС]
	Ога, только так работает когда картинка с помощью <img src=""> вставляется, а вот когда применяется в качестве фона - нет. 0

@Nebiross 9 / 9 / 2 Регистрация: 07.12.2010 Сообщений: 98
	05.04.2013, 13:42 [ТС]
	Окей, только тема не об этом. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	05.04.2013, 14:29
	ну значит не все почтовые клиенты еще работают со всеми CSS3. Используйте альтернативные способы. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	05.04.2013, 14:38
	не факт, что и абсолютное позиционирование поддерживается этим клиентом. А на другие почтовые сервисы вы отправляли это письмо? приведите html-код письма. 0