Данный эффект напоминает параллакс, но выполнен на CSS и всего одним классом.
Решение очень простое, но подойдет не для всех изображений, в примере на этот счет есть заметка.
Пример:
Обратите внимание, что фоновое изображение в каждом блоке встаривается в размер экрана браузера, а лишнее отрезается.
Если данная секция будет находиться в малом контейнере или использоваться не соответсвующая картинка, то будет теряться качество или отрезаться много нужного.
Текстовая информация
Текстовая информация
Текстовая информация
HTML:
|
1 |
<div class="fix-bg" style="background-image: url(bg-image.jpg)"></div> |
CSS:
|
1 2 3 4 5 6 7 8 |
.fix-bg { height: 520px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center center; margin: 20px 0; } |
Для мобильного варианта можно отключить эту фиксацию и изменить высоту секции, добавив:
|
1 2 3 4 5 6 |
@media (max-width: 767px) { .fix-bg { background-attachment: scroll; height: 320px; } } |
Смотрите также:
Новогодняя блок-секция с поздравлением
Секция-слайдер, в которой каждый слайд состоит из четырех фотографий.
Разделитель для секций в виде бегущих волн с использованием SVG и CSS
Добавить комментарий:
Ваш комментарий отправлен!
Здравствуйте Александр.
Не нашел на вашем сайте тему как установить блок комментариев. Перебрал много вариантов из разных источников, не получается, чего-то я наверное недопонимаю... Не могли бы вы помочь ?
Здравствуйте. Скажите пожалуйста, а как мне фиксированный фон использовать если сайт на bootstrap? Ничего не получается. Вернее все работает, но картинка не масштабируется, видно только ее центральную часть.
Она так и работает.
Картинка идет во весь экран (что не умещается отрезается), а видно ее только в окне.
Соотв. если контейнер узкий, многое будет не видно.
Здравствуйте Александр. Большое спасибо, получилось. Но не совсем, как мне кажется. На смартфоне при прокрутке туда сюда и если пальцем верх вниз, картинка дергается. Брал ваши коды html и css, смотрел и добавлял по советам из сети, не получается, картинка в фикс-боксе дергается. Что это может быть? Если не трудно, посмотрите, вот ссылка https://assorty.site/. Может в css что не так?
У меня нормально на телефоне, думаю зависит от него или от браузера.
Как вариант, это просто убрать этот эффект для него (в css выше есть пример)
Понятно. Спасибо !