13.06.2025
У меня на сайте если ты помнишь есть вот такой оранжевый элемент Heder
Я его сделал временно с целью обозначить что тут будет картинка, аж навигационную панель переделать пришлось ради этого.
На досуге я подумал, и решил сделать динамический Heder
Это когда шапка сайта меняет картинку при наступлении определённого условия.
Но на самом деле можно менять не только картинку но и размер шапки и много чего.
У меня же будет просто меняется картинка на осень зима весна лето, в зависимости от того, какой месяц будет у тебя в компудаторе на календаре.
Для этого я сделал 4 картинки
Все они размером 2120x350 пикселей по шаблонам. Потому что сейчас главное показать суть как это делается, а картинки как ни будь потом нарисую.
HTML код
Для этого нужно в коде HTML, хедеру сделать id
Тут будет прописываться картинка
CSS код
Дальше в CSS я удалил всё, что было связанно со старой шапкой, и написал вот такие команды для новой шапки.
Важный момент:нужно запомнить высоту твоей нарисованной картинки в пикселях, а потом в команде height указывать её
Tо есть должно быть так height: высота твоей картинки px;
Если ты укажешь высоту меньше чем твоя картинка, браузер её обежит и покажет не всю
Если ты укажешь высоту больше чем твоя картинка, браузер сделает пустую область белого цвета под картинкой.
И в итоге будет такой результат
Это потому что хедер пустой и в нём не прописан путь до картинки
JS код
Чтобы это исправить нужно написать такой скрипт
Результат
В итоге картинка будет показываться
Чтобы проверить меняются ли картинки, не обязательно ждать определённого сезона 3 месяца. Просто балуемся с настройками даты в компудаторе.
Всё.