Текст
Теперь сделаем фон по картинке. Для этого сделайте следующее:
1) Найдите нужную вам картинку (если хотите, чтобы она была во всю длину стены, подбирайте размер от 1200px в длину).
2) Загрузите картинку на надежный фотохостинг.
3) Скопируйте прямую ссылку на картинку и добавьте в код.
4) Узнайте высоту картинки и добавьте значение в код.
Например. Ссылка на картинку - https://images.vfl.ru/ii/1513857894/3340b8ea/19872695.jpg
Ширину (width) оставим 600px, т.к если надо она сама растянется по размеру экрана пользователя.
Высота (height) - 292px. Если хотите, просто укажите меньшее значение и высота фона будет меньше.
Поэтому код примет вид:
<font style="min-width: 600px; height: 292px; display: block; padding: 10px; text-align: center; font-size: 18px; color: #ffffff; margin: -5px; background: url(//images.vfl.ru/ii/1513857894/3340b8ea/19872695.jpg) 50% 50% no-repeat;">Текст</font>
Вот что будет в итоге:
Текст
Блоки2
Перейдем к оформлению текста блоками. Допустим у нас есть текст с простой рамкой толщиной 1px черного цвета:
<font style="display: block; border: 1px solid #000000">Текст</font>
Текст
Снова добавляем отступы внутри, меняем цвет рамки, увеличиваем ее толщину и заменим вид рамки:
<font style="display: block; padding: 10px; border: 2px dashed #1494E3;">Текст</font>
Текст
Теперь скруглим углы (8px), снова поменяем вид рамки и сделаем текст по центру:
<font style="display: block; padding: 10px; border: 3px dotted #1494E3; border-radius: 10px; text-align: center;">Текст</font>
Текст
Забудем про рамки, сделаем закругленный (6px) блок с фоном, а цвет текста поменяем на белый:
Теперь сделаем блок, заменив цвета текста, добавив жирности, и сделав отступ от верхнего края до текста, фоном которого выступит картинка:
<font style="min-width: 450px; height: 100px; display: block; padding-top: 60px; font-weight: bold; text-align: center; font-size: 26px; color: #FFE600; text-shadow: 1px 1px 1px #292929; font-weight: bold; margin: -10px; background: url(//images.vfl.ru/ii/1513858094/876bd729/19872725.png) 50% 50% no-repeat;">Текст</font>
Текст
Позиционирование3
Помимо использования привычного тега text-align: [left, center, right], который располагает текст слева, по центру и справа соответственно, для позиционирования (слева или справа) можно использовать тег float.
Внутри обычного кода добавляем еще один с данным тегом:
<font style="display: block; padding: 10px;">Текст<font style="display: block; color: red; float: right;">Текст справа</font></font>
Получим следующее:
ТекстТекст справа
Готовые решения с иконками4
Произвольный текст пользователя 1
<font style="background-image:url(//www.wmmail.ru/img/wall24.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 1</font>
Произвольный текст пользователя 2
<font style="background-image:url(//www.wmmail.ru/icon/currency_dollar.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 2</font>
Произвольный текст пользователя 3
<font style="background-image:url(//www.wmmail.ru/icon/heart.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 3</font>
Произвольный текст пользователя 4
<font style="background-image:url(//www.wmmail.ru/icon/edit.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 4</font>
Произвольный текст пользователя 5
<font style="background-image:url(//www.wmmail.ru/img/help224.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 5</font>
Произвольный текст пользователя 6
<font style="background-image:url(//www.wmmail.ru/img/folder20.png); background-repeat:no-repeat; padding: 0px 22px 6px 5px"></font> <font style="font-size: 14px;">Произвольный текст пользователя 6</font>
Произвольный текст пользователя 7
<font style="background-image:url(//www.wmmail.ru/img/check16.png); background-repeat:no-repeat; padding: 0px 18px 6px 5px"></font> <font style="font-size: 14px;">Произвольный текст пользователя 7</font>
Произвольный текст пользователя 8