Как создать привязку логотпа к пунктам меню?

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

может кто знает как можно сделать привязку CSS к пункту меню(там описан путь к шапке)?
вроде так понимаю что проше 15 CSS файлов сделать.. будет быстрее загружаться.

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

 

Заменить позицию логотипа позицией для модулей.
Создать несколько модулей логотипов типа "Произвольный HTML-код"
Слева в настройках модуля выбрать нужную позицию и пункты меню, где модуль будет показываться (для каждого модуля свой набор)

 

Спасибо. У меня это место описывается в index.pnp таким Div-ом:

Сама картинка прописана в CSS: (/images/header.jpg)

Подскажите, каким образом можно заменить в index.php строчку для позиции модуля.

 

Насколько я понимаю, можно заменить <div class="art-header-jpeg"></div>
на <div id="top"><jdoc:include type="modules" name="top" /></div>
В CSS вместо

Код (CODE):

1. div.art-header-jpeg {
2. position: absolute;
3. z-index: -1;
4. top: 0;
5. left: 0;
6. width: 1001px;
7. height: 150px;
8. background-image: url('../images/header.jpg');
9. background-repeat: no-repeat;
10. background-position: center center;
11. }

Написать

Код (CODE):

1. #top {
2. position: absolute;
3. z-index: -1;
4. top: 0;
5. left: 0;
6. width: 1001px;
7. height: 150px;
8. }

Если там фоном будет и постоянный рисунок, то оставить

Код (CODE):

1. background-image: url('../images/header.jpg');
2. background-repeat: no-repeat;
3. background-position: center center;

 

Вы не ошиблись! До чего же все идеальное просто! Низкий поклон и респект! Спасибо!
Ребята, этот метод замены действительно работает. Далее, как писал ValeryB:

Добавлю еще, поскольку у меня в DIVe позиция модуля назвается top:

то находим в папке шаблона файл templateDetails.xml и добавляем <position>top</position>, если он отсутствует.