С появлением MacOS и Windows 11 можно ожидать моду на размытые фоны на весь экран (с использованием фильтра blur).
Теперь в ELiS можно также поставить картинку в качестве фона во всю страницу.
Содержание
Как поставить фоновое изображение[править]
В поле field_config появился новый параметр pageBackgroundUrl. Вы можете установить изображение как на весь сайт на странице admin/config/content/elis, так и переопределить в какой-то папке в поле настроек стандартным для field_config способом.
Пример field_config:
{
"pageBackgroundUrl":"https://elis.psu.ru/sites/default/files/images/psu-fountain-blur.jpg"
}
Требование к изображению[править]
Есть простые рекомендации:
- изображение должно быть достаточно большого размера, например 1920x1080, но можно и под 4K;
- формат должен быть один из png, jpg, svg;
- лучше, чтобы изображение было небольшим размером в 100-200 Кбайт для быстрой загрузки страницы, поэтому лучше использовать jpg с сильным сжатием;
- изображение желательно размыть (наложить фильтр blur) и осветлить, чтобы темный текст поверх изображения был читаем.
Размытие и осветление изображения[править]
Есть два способа, один путем использования графического редактора, работающий во всех браузерах и второй с помощью CSS, работающий в Chrome и Safari на момент написания инструкции.
Размытие в графическом редакторе paint.net[править]
Откройте изображение в paint.net.
В меню выберите Эффекты -> Размытие -> Несфокусированность и установите радиус размытия около 20.
В панели "Слои" создайте новый слой, по умолчанию он будет выше фотографии.
Залейте новый слой белым цветом.
Двойным кликом по слою в панели "Слои" уменьшите непрозрачность слоя с 255 до, например, 200.
Сохраните результат в формате jpg с сильным уровнем сжатия, при котором артефакты сжатия еще не будет заметны, например со сжатием в 60%.
Размытие средствами CSS[править]
На странице admin/structure/block создайте блок с фильтром ввода FullHTML и разместите его в подвале (footer) сfqnf.
В блоке разместите подобный код, который сделает тоже самое, что описано в обработке изображения графическим редактором, но средствами CSS:
<style>
body {
background: rgba(255,255,255,.6);
backdrop-filter: blur(10px);
}
</style>
Обратите внимание, что этот код будет осветлять и размывать любое изображение, заданное в качестве фона, поэтому если у вас будут разные изображения в разных подкаталогах, такой способ может оказаться как проще (не надо каждое фоновое изображение обрабатывать в редакторе), так и менее универсальным (если вам где-то не нужно накладывать такой фильтр, вам это сложно будет сделать.