Шапка в ModernBB

Не могу никак понять как сменить шапку полностью. В админке есть лого , и есть
вот такое
http://prntscr.com/eoat5w
Причем начальный файл был в формате векторной графики. Сейчас это прозрачное пнг. Но шапка черная. Размеры непонятные. Местное хранилище фото не понимает пнг и делает его вообще черным,

В общем как сменить вот эту шапку на ту картинку и цвет который мне бы хотелось

http://prntscr.com/eoatvj

Хартахана пишет:Местное хранилище фото не понимает пнг и делает его вообще черным

Servimg понимает и сохраняет png-файлы, если они не весят больше 2Мб. В противном случае — да, будет убирать альфа-канал (прозрачность).


Добавьте в CSS и изменяйте по своему усмотрению

Код:

.headerbar {
    background-color: #5fa1ce;
    background-image: url(https://illiweb.com/fa/modernbb/bg_header.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
}

где

   background-color - цвет фона шапки
   background-image - фоновое изображение шапки
   background-position - выравнивание фоновой картинки шапки
   background-repeat - повторяемость / неповторяемость фоновой картинки шапки
   background-size - масштабирование фоновой картинки шапки
   height: 350px - высота шапки

Dana Domirani пишет:Servimg понимает и сохраняет png-файлы, если они не весят больше 2Мб. В противном случае — да, будет убирать альфа-канал (прозрачность).

а зачастую пнг у меня весят гораздо больше. Но теперь хоть буду знать. Спасибо

еще возник вопрос какой высоты и ширины блок под шапку. Я ставлю высоту 350 делаю щапку высотой 350 но она не влезает, картинка обрезается причем именно по высоте. Но я так поняла что она масштабируется, что задано в параметрах таблицы. Пробовал заменить на contain получила обрезку по ширине. Т.е надо знать 2 параметра раз она не масштабируется корректно
вот размеры шапки http://prntscr.com/eoc2t1
вот заданные параметры http://prntscr.com/eoc32a

а вот результат http://prntscr.com/eoc3bk

Я пробовала и стандартные размеры шапки. 450 на 900 то же самое

Хартахана пишет:а зачастую пнг у меня весят гораздо больше.

Можно облегчить png картинку весом до 5MB практически без потери качества. По крайней мере на глаз вы не заметите. Вот здесь https://tinypng.com
Вот видите разницу?
Эта оригинал весом 4,3 МВ



А это облегчённая, весит 763.8 KB

При нынешних мониторах размер "резиновой" масштабирующейся шапки должен быть 1920 px по бОльшей стороне. Т.е. изначально надо подбирать картинку не меньше, чем 1920 по ширине.

Например, берем эту https://i.servimg.com/u/f58/13/71/53/06/210.jpg
Ее размеры — 1920 на 683, вес - 378Кб
Настраиваем CSS:
- указываем высоту шапки 680px
- указываем позиционирование background-position как left center, чтобы при изменении размеров экрана основной оставалась левая часть картинки
- оставляем масштабирование cover

Код:

.headerbar {
    background-color: #5fa1ce;
    background-image: url(https://i58.servimg.com/u/f58/13/71/53/06/210.jpg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 680px;
}

и сохраняем.


Использовать png имеет смысл, если шапка собирается из нескольких художественных рисунков / фото и нужно добиться эффекта многослойности.
Если шапка — это одна фоновая фотография, то никакая прозрачность не нужна. Для такой картинки достаточно формата jpg (его можно оптимизировать до 100-400Кб).
Если фон шапки — повторяющийся узор, то оптимальный формат — svg (масштабируемая векторная графика, она самая "легкая").

Dana Domirani, благодарю, попробую. Я картинку взяла на пробу. Шапка предполагается многослойная. Но прежде чем что то делать надо все четко знать. Как и где расположить