Картинка в header не меняет размер при изменении разрешения экрана - Joomla 2.5: Общие вопросы

 ! Люди добрые, помогите!
Есть сайт http://berdcity.zz.mu/
Настроен, как динамический - меняет свою ширину в зависимости от разрешения экрана. (максимиум 1200пкс в ширину)
Но картинка в шапке сайта не уменьшается при уменьшении разрешении экрана
Если сделать 800х600, так половина картинки просто уезжает за пределы шаблона

Как сделать так, чтобы картинка тоже меняла свой размер автоматически при меньшем разрешении экрана?

можно в правило #header добавить background-size: contain;
но вообще в вашем случае имхо легче будет картинку выводить просто через <img> а не как бекграунд.

можно в правило #header добавить background-size: contain;
но вообще в вашем случае имхо легче будет картинку выводить просто через <img> а не как бекграунд.

Извините, пожалуйста, еще раз.. Вы можете подсказать, как и где что изменить надо в коде? Сайт делал я, но я только учусь и мало что еще знаю. Если не сложно, подскажите..

можно в правило #header добавить background-size: contain;
но вообще в вашем случае имхо легче будет картинку выводить просто через <img> а не как бекграунд.

Добавил в header строчку background-size: contain;
Картинка уменьшается теперь при уменьшении разрешения, но она уменьшается и по длине и получается черный кусок шапки без картинки..

Если в настройках шаблона не вводится логотип,
Вам нужно в шаблоне найти
<div id="logo"> </div>
 и вставить
<div id="logo">
<img src=""../images/header.jpg"="Бердичів світ" />
 </div>
Путь к файлу нужно подправить -../images/header т.к. єто путь от файла CSS, а нужно от index.php
в помощь http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki
Соответственно убрать
#header {
   background-image: url("../images/header.jpg");;
    min-height: 200px;

Если вводтся - укажите эту картинку

Если в настройках шаблона не вводится логотип,
Вам нужно в шаблоне найти
<div id="logo"> </div>
 и вставить
<div id="logo">
<img src=""../images/header.jpg"="Бердичів світ" />
 </div>
Путь к файлу нужно подправить -../images/header т.к. єто путь от файла CSS, а нужно от index.php
в помощь http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki
Соответственно убрать
#header {
    background-image: url("../images/header.jpg");;
    min-height: 200px;

Если вводтся - укажите эту картинку

В настройках шаблона есть настройка Лого. Выбрал там картинку с шапкой "Бердичів СІТІ".



В CSS шаблона удалил:

#header {
   min-height: 200px;
   margin: 0 0px 0px 0px;
   padding:0 0 0 21px;
   position:relative;
   background-size: contain;
   background-image:url('../images/header.jpg') ;
   background-repeat:repeat-x;
}

Теперь картинка стала кликабельна и переводит на главную страницу. Но она выходит за рамки шаблона при изменении разрешения экрана.
Сделал несколько скриншотов. Изменения делал на локальном сервере.



Еще в CSS шаблона есть строки:

#logo {
   width: auto;
   overflow:hidden;
}
a.imglogo {
   line-height: normal;
   font-size:36px;
   display:block;
   margin:0;
   padding:0;
}
a.imglogo:hover {
   text-decoration:none;
}
a.medialogo {
   line-height: normal;
   font-size:36px;
   display:block;
   margin:0;
   padding:0;
}
a.medialogo:hover {
   text-decoration:none;
}

#logo a.logo {
   line-height: normal;
   font-size:46px;
   display:block;
   margin:0;
   letter-spacing:-1px;
   padding: 20px 40px 10px 60px;
}
a.logo:hover {
   text-decoration:none;

Может тут надо что-то поменять или вставить, чтоб картинка лого меняла размер при изменении разрешения экрана?

Спасибо, что помогаете.

надо будет файлы шаблона править, одними настройками не обойдешься. Под спойлер выложите index.php шаблона.

надо будет файлы шаблона править, одними настройками не обойдешься. Под спойлер выложите index.php шаблона.

извините, прошлое сообщение тоже надо было под спойлер делать, не знал, что тут так можно.
вот всё, что есть в файле index.php в папке с шаблоном

вместо
впишите

вместо

Код: php

               <div id="logo">
                  <?php if (($this->params->get('showimgLogo'))!=0) : ?>            
                     <a class="imglogo" href="index.php"><img alt="Logo" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo/<?php echo 
                  .......................
                  <?php endif;?>
               </div>   

впишите

Код

               <div id="logo">
               <img src=""../images/header.jpg" alt="Бердичів світ" style="width: 100%;" />
               </div>

Поменял. Шапка делается длинная вниз и без рисунка вообще..

Да не надо шаблон править, там все корректно
#logo {
   width: auto;
   overflow:hidden;
}
, сделайте
#logo {
   width: 100%;
   overflow:visible
;
}

Да не надо шаблон править, там все корректно
#logo {
   width: auto;
   overflow:hidden;
}
, сделайте
#logo {
   width: 100%;
   overflow:visible
;
}

Поменял. Стало так:


Картинка не обрезается, но уезжает за пределы шаблона при уменьшении разрешения экрана

Картинка не обрезается, но уезжает за пределы шаблона при уменьшении разрешения экрана

т.е. Вы поменяли, удалили бекграунд, вставили картинку через настройки шаблона?
Вы это лелаете на локальном сервере?
На сайте изменений не вижу

т.е. Вы поменяли, удалили бекграунд, вставили картинку через настройки шаблона?
Вы это лелаете на локальном сервере?
На сайте изменений не вижу

Да, на локальном.
Поменял то, что Вы написали, удалил бэкраграунд, как советовали выше и вставил картинку в Лого в настройках шаблона.
Результат на предыдущем скрине..

Сложно не видя, - пройдитесь инспектором от
<div id="header">
до
<a  >
найдете, что выталкивает,