Главная » Администрирование сайта » Работа со стилями (CSS) » Как поставить картинку на задний фон в поля для ввода текста (на форуме и в комментариях)

Как поставить картинку на задний фон в поля для ввода текста (на форуме и в комментариях)

13.02.2012 в 14:11
Автор: DIREN   

В данной статье расскажу как делается картинка задним фоном в поле для ввода текста.

В качестве примера я помещу вот эту картинку на задний фон стандартного пустого белого прямоугольника:


  • Для форума:

    И так как же делается картинка в поле для ввода текста на форуме


    Всё очень просто:
    Открываем CSS и находим там строчку которая начинается так: .postTextFl*
    Заменяем всю строчку на эту:
    Code
    .postTextFl {width:550px;height:150px;background:url('ссылка на вашу картинку') no-repeat 100% 100%;}


    Где:

    width:550px - ширина окна ввода текста
    height:150px - высота окна ввода текста
    background:url('ссылка на вашу картинку') - код показывающий, что картинка адрес которой указан в скобках, будет задним фоном
    no-repeat - означает "не повторять", т.е. картинка не будет множиться
    100% 100% - это отступы от верхнего левого угла, т.е. "100% 100%" означает что картинка будет располагаться на 100% в лево от верхнего левого угла и на 100% вниз, т.е. получается что картинка будет в правом нижнем углу

    *!Важно: Если вы в своём CSS не нашли строчку .postTextFl, то просто возьмите и пропишите её сами в любое понравившееся Вам место.

    Если не поняли про отступы, то попробую ещё пару примеров показать чтоб было понятней:

    Хотим чтоб картинка была ровно по центру поля, а не в правом нижнем углу:
    значит вместо 100% 100% нам нужно сделать 50% 50%.


    Таблица выравнивания:




  • Для комментариев:

    Как же делается картинка в поле для ввода текста комментариев.



    Открываем CSS и находим там строчку которая начинается так: .commFl
    Заменяем всю строчку на эту:
    Code
    .commFl {width:100%;background:url('ссылка на вашу картинку') no-repeat 0% 100%;}


    Ну а что тут и к чему мы можем прочитать в описании к форуму.

    Картинка, Фон


  • Рейтинг: 22  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 11950          Комментариев:

    Похожие инструкции