Текст поверх картинки html

Текст поверх картинки htmlПри создании блога или сайта иногда требуется разместить текст поверх картинки или текст поверх изображения. Познаний html, чего греха таить, у многих блоггеров не хватает, а то и вовсе нет.

Ничего страшного, даже если и так. Можно скопировать простой код и использовать его немного модифицируя под свои нужды. Приведу простой пример:

Есть картинка:Текст поверх картинки html

Есть текст:

Текст поверх картинки html

Есть код:

<div><img src=»mbg.png» title=»Текст поверх картинки html» alt=»Текст поверх картинки» />

<div style=»position: fixed; left:30px;  top:44px;»>

<h2>Текст поверх картинки HTML</h2>

</div>

</div>

Получаем на выходе:

Текст поверх картинки html Рис.2 Блочный элемент <div> с текстом находится внутри блочного элемента <div> с картинкой. Подробнее о теге <div> можно почитать на сайте htmlbook.ru.

Нужно правильно указать путь к картинке. С помощью тегов «position: fixed; left:30px;  top:44px;» можно отрегулировать отступ текста слева и сверху.

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

2 comments to Текст поверх картинки html

  • Юрий

    Проблема с написанием текста.
    Не могу не как сделать картинку задним фоном чтоб можно было не ней что то написать, я уже все перепробовал. Но если получается то картинка немного сдвигается или еще какой глюк получается.
    Может подскажете что можно сделать. Вот код картинки.

    Пробовал разные команды типо background не получилось. Хотя я конечно плохо в HTML разбираюсь.
    Сайт я указал где хочу поменять.www.mercado.by

  • Виталий

    echo ‘Текст поверх картинки HTML’;

    Если нужен чистый html удалите echo’ в начале и ‘; в конце.

С нетерпением жду ваши комментарии

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>