Ответить Новая тема Новый опрос 
 как подложить картинку под логотип?
Kintim
Новичок
Сообщений: 39
Регистрация: 17-06-2011


17-06-2011 19:49
Друзья. В общем проблема в том, что мне нужно положить картинку (png) под логотип и дублировать по оси-Х, но так чтобы background остался не тронутым. Другими словами надо кинуть ее между логотипом и фоном...
Как это сделать ума не приложу.... :confus:
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Алекс


Администратор
Сообщений: 4516
Откуда: Красноярск
Регистрация: 29-05-2009


17-06-2011 21:06
используйте position: relative или z-index
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Kintim
Новичок
Сообщений: 39
Регистрация: 17-06-2011


17-06-2011 23:33
прошу прощения... за странный вопрос, но все же - в какое место кода вставлять интересующую меня картинку? что бы она оказалась над background-ом???
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Kintim
Новичок
Сообщений: 39
Регистрация: 17-06-2011


17-06-2011 23:49
и что самое интересное этот элемент должен иметь свойства фона, т.е. растягиваться во всю ширину экрана при увеличении разрешения...)
знаю что можно иногда использовать:

background-image: url ('.../img/mybg.jpg'), url ('.../img/mylogo.png');

но что-то не работает ((
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Алекс


Администратор
Сообщений: 4516
Откуда: Красноярск
Регистрация: 29-05-2009


17-06-2011 23:53
Цитата:( Kintim @ 18-06-2011 00:33 Смотреть сообщение )
но все же - в какое место кода вставлять интересующую меня картинку? что бы она оказалась над background-ом???



Пример:
Код:
<a class="logo">
    <img src="img_logo.jpg"  />
</a>

<a class="my_pic">
    <img src="img.jpg" />
</a>


в .css:
Код:
.logo {position:relative;}
.my_pic {position:relative; right:150px;}
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Kintim
Новичок
Сообщений: 39
Регистрация: 17-06-2011


30-06-2011 14:27
Спасибо Алекс за советы... Направил, так сказать, в нужное русло ))
Добавил в Header.tpl :
Код:
<div class="my_pic"></div>


И в Global.css :
Код:
.my_pic  {
    background-image: url('../img/wood.png');
    position: absolute;
    top:214px;
    right: 0px;
    width: 100%;
    height: 35px;
    z-index: 1;
}</div>


И еще, тоже в глобал:
Код:
#page {
    position: relative;
    width: 980px;
    margin: 0 auto 2px auto;
    text-align: left;
    z-index: 2; /* вот эту строчку) */
}


Грубо говоря получилось, что логотип нависает над плашкой - как-то так:


Изображения:
220587.gif - Размер файла91KB, Скачиваний: 236 (Нажмите для увеличения)
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Ответить Новая тема Новый опрос