Bardzo dobrze że wstawiłeś link do forum, dzięki temu miałem dostęp do strony i mogłem metodą prób i błędów ustawić odpowiednie parametry, żeby wyszło zgodnie z Twoimi oczekiwaniami (a przynajmniej najbardziej zbliżone do Twoich oczekiwań).
Po prostu poinformowałem o usunięciu tego linku, bo często rejestrują się tu osoby tylko po to by zareklamować jakąś stronę i piszą jakieś "wyimaginowane" problemy (albo posty z treścią, która nie trzyma się kupy wraz z linkiem do strony) i tyle byli widoczni. Śmiało możesz wrzucać link do forum, gdy piszesz o tym że masz problem, gdyż to bardzo pomaga w jego rozwiązaniu. Ja ze względu właśnie na te konta spamujące i reklamujące, dla bezpieczeństwa, pozwoliłem sobie usunąć ten link, bo samą stronę mam zapamiętaną już (w historii przeglądania), bo nie byłem do końca pewny czy to jeden z takich przypadków.
Ale już przywróciłem link do Twojej strony, bo może, jak to nie będzie działać, ktoś inny pomoże
Jedyny sposób, jaki mi do głowy przychodzi, to ustawienie go nie jako tła obrazkowego, tylko jako obrazka (czyli nie jako background-image w css, lecz jako <img> w pliku overall_header). I wtedy dla tego obrazka ustawić szerokość 100%.
Usuwasz to co wpisałeś wyżej
nie zapomnij o pliku responsive.css - jak była klasa .headerbar jeszcze gdzieś określona, to upewnij się że posiada odpowiednie wartości (tj. jakiś padding, margin i inne, jeśli tylko uznasz to za konieczne. Najważniejsze by nie miał określonej wysokości i nie było wstawione żadne tło obrazkowe) i nie może mieć określonej wysokości, bo wtedy zrobią Ci się wolne przestrzenie, albo obrazek będzie najerzdżał na inne elementy strony
zaraz za otwarciem div'a z klasą headerbar (tam gdzie wtedy miałeś obrazek), wewnątrz jego wstawiasz
w miejsce
TU_LINK_DO_OBRAZKA
oczywiście wstawiasz link. Ja nigdy nie pamiętam, jak to szło, ale wydaje mi się, że będzie to
{T_THEME_PATH}/images/ban.jpg
w Twoim przypadku, jak nie, to w każdym razie popatrz jak jakieś inne obrazki są wstawiane w phpBB i w podobny sposób to wykonaj.
Stwórz klasę (teraz już w pliku *.css (najlepiej tam gdzie miałeś wcześniej .headerbar)
.headerbar img
i umieść w niej
widht:100%;
- tym sposobem, obrazek zawsze będzie miał maksymalną szerokość i będzie się skalował proporcjonalnie.
Jeśli pojawią się jakieś większe odstępy, upewnij się, że klasa .headerbar nie ma określonej nigdzie wysokości.
Wydaje mi się, że jest to jedyny sposób na zachowanie proporcji obrazka z zachowaniem jego całości, gdyż umieszczając go jako tło obrazkowe, element którego jest tłem musi posiadać określoną wysokość, a tę jest ciężko podać dla elementów, które mają mieć zmienną wysokość w zależności od rozdzielczości (a przynajmniej ja bym miał z tym problem), bo nie znam innego sposobu jak wpisywanie ręczne dla każdej rozdzielczości, a więc tego kodu byłoby strasznie dużo i zawsze można ominąć jakąś i o tym nie wiedzieć (dopóki ktoś nie zgłosi że jest taki błąd, o ile zauważy i/lub zorientuje się że tak być nie powinno).