Главная » Администрирование сайта » Работа со стилями (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  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 11770          Комментариев: 15

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

    14.12.2015 в 16:33      0  

    что-то не работает( в поле для ввода сообщения отображается фон сайта.

    http://viewout.ru/forum/2-17-1
    18.12.2015 в 14:54      0  

    Не могу подтвердить. Вы уже исправили?
    07.02.2014 в 17:19      0  

    Я прописала код для картинки на форуме, вроде бы все правильно, но картинка не появилась, помогите пожалуйста sad
    08.02.2014 в 06:38      0  

    Без адреса сайта решить вопрос не является возможным.
    08.02.2014 в 15:34      0  

    http://catwarriors-cat.clan.su
    Вот
    27.02.2012 в 19:14      0  

    Прошу помочь разобраться, у меня, что то не получается вставить картинку в форму для коментариев

    было до
    <table border="0" width="100%" cellspacing="1" cellpadding="2" class="commTable">
    <tr><td class="commTd2" colspan="2">$ERROR$</td></tr>
    <?if(!$USER_LOGGED_IN$)?>
    <tr><td width="15%" class="commTd1" nowrap>Имя *:</td><td class="commTd2"><input class="commFl" type="text" name="name" value="$NAME$" size="30" maxlength="60"></td></tr>
    <tr><td class="commTd1">Email:</td><td class="commTd2"><input class="commFl" type="text" name="email" value="$EMAIL$" size="30" maxlength="60"></td></tr>
    <?endif?>
    <tr><td class="commTd2" colspan="2"><div style="padding-bottom:2px">$BBCODES$</div><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td valign="top"><textarea class="commFl" style="height:135px;" rows="8" name="message" id="message" cols="50">$MESSAGE$</textarea></td><?if($SMILES$)?><td width="5%" valign="top" align="center" valign="top" style="padding-left:3px;">$SMILES$</td><?endif?></tr></table></td></tr>
    <?if($SUBSCRIBE$)?><tr><td width="15%" class="commTd1" nowrap>Подписка:</td><td class="commTd2">$SUBSCRIBE$</td></tr><?endif?>
    <?if($SECURITY_CODE$)?><tr><td class="commTd1" nowrap>Код *:</td><td class="commTd2">$SECURITY_CODE$</td></tr><?endif?>
    <tr><td class="commTd2" colspan="2" align="center"><input type="submit" class="commSbmFl" id="addcBut" name="submit" value="- Добавить

    сделал как по инструкции
    <table border="0" width="100%" cellspacing="1" cellpadding="2" class="commTable">
    <tr><td class="commTd2" colspan="2">$ERROR$</td></tr>
    <?if(!$USER_LOGGED_IN$)?>
    <tr><td width="15%" class="commTd1" nowrap>Имя *:</td><td class="commTd2"><input class="commFl" type="text" name="name" value="$NAME$" size="30" maxlength="60"></td></tr>
    <tr><td class="commTd1">Email:</td><td class="commTd2"><input class=.commFl {width:100%;background:url('http://iisus.ucoz.ua/avatar/images.jpg') no-repeat 0% 100%;}
    <?endif?>
    <tr><td class="commTd2" colspan="2"><div style="padding-bottom:2px">$BBCODES$</div><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td valign="top"><textarea class="commFl" style="height:135px;" rows="8" name="message" id="message" cols="50">$MESSAGE$</textarea></td><?if($SMILES$)?><td width="5%" valign="top" align="center" valign="top" style="padding-left:3px;">$SMILES$</td><?endif?></tr></table></td></tr>
    <?if($SUBSCRIBE$)?><tr><td width="15%" class="commTd1" nowrap>Подписка:</td><td class="commTd2">$SUBSCRIBE$</td></tr><?endif?>
    <?if($SECURITY_CODE$)?><tr><td class="commTd1" nowrap>Код *:</td><td class="commTd2">$SECURITY_CODE$</td></tr><?endif?>
    <tr><td class="commTd2" colspan="2" align="center"><input type="submit" class="commSbmFl" id="addcBut" name="submit" value="- Добавить комментарий -"></td></tr></table>

    Но картинка так и не появилась, может не правильно отредактировал код, можете показать мою ошибку?
    27.02.2012 в 20:25      0  

    Быть может вы в css не вставили(исправили) соответствующую строчку???

    .commFl {width:100%;background:url('ссылка на вашу картинку') no-repeat 0% 100%;}
    Вот скрин того, куда нужно зайти: http://rghost.ru/36741600/image.png

    Вам нужно не в виде комментариев ковыряться,а зайти в таблицу стилей CSS и там поправить соответствующую строчку, которая отвечает за это. А код лучше верните старый, в нем ничего менять не нужно было.
    15.02.2012 в 22:21      +2  

    Еще для позиционирования фона можно использовать словарные обозначения:

    left top center top right top и т.д.
    16.02.2012 в 02:00      0  

    Верно happy
    Но мало ли ты захочешь чтоб не у самого края была прижата картинка,а например на 80% от края smile
    Так что думаю в % эфективнее настраивать положение, согласен? smile
    15.02.2012 в 15:53      0  

    Хорошая инструкция! Всё чётко и понятно расписано! Спасибо!
    15.02.2012 в 15:54      0  

    Благодарю smile
    15.02.2012 в 01:50      0  

    Отличная инструкция! Вроде мелочь, а как стильно выглядит! Дело осталось за малым - разработать свой логотип ;-) От меня плюс.
    15.02.2012 в 15:16      0  

    smile

    Сергей

    Спам
    14.02.2012 в 13:32      0  

    Классно! Спасибо!)
    14.02.2012 в 23:33      0  

    Всегда пожалуйста happy