По умолчанию, когда вы скроллите веб-страницу с фоном, фон прокручивается вместе с другими элементами. Иногда это уместно, а иногда хочется, чтобы изображение, заданное через background-image , всегда оставалось на виду. Для управления этим состоянием существует свойство background-attachment .
Значения background-attachment
Свойство может принимать три значения для настройки поведения фона:
- scroll (значение по умолчанию) - фоновое изображение перемещается вместе с другими элементами при скролле веб-страницы.
- fixed - значение фиксирует фоновое изображение, делая его нечувствительным к скроллу. При прокручивании страницы фон на заднем плане останется неподвижным.
- local - данное значение было добавлено из-за того, что в случае с локальным скроллом фон со значением scroll ведет себя как fixed . При значении local фон прокручивается вместе с содержимым элемента, и не прокручивается, если содержимое не скроллится (но прокручивается вместе с самим элементом).
Для лучшего понимания работы свойства взгляните на примеры ниже. Чтобы вы могли их сравнить, ваш все три значения background-attachment (надеемся, что при изучении CSS вы пользуетесь современным десктопным браузером!).
background-attachment: scroll
background-attachment: fixed
background-attachment: local
Поддержка браузерами
Полная поддержка всех значений свойства background-attachment есть у десктопных браузеров IE9+, Edge 12+, Firefox 25+, Chrome (все версии), Safari 5+, Opera 11.5+. Из мобильных браузеров все значения понимают Opera Mobile, Firefox для Android, IE Mobile и QQ Browser. В других браузерах поддержка либо частичная, либо отсутствует.
Далее в учебнике: свойства background-origin и background-clip для позиционирования фоновых изображений и управления обрезкой.
Этот небольшой урок будет о том как сделать у себя на сайте (или на одностраничнике) красивый фиксированный фон, который будет плавно перетекать из одного изображения в другое при прокрутке страницы пользователем. В CSS есть такое свойство background-attachment: fixed , которое позволяет зафиксировать фоновое изображение. То есть при прокрутке страницы оно не будет прокручиваться со страницей. Но в CSS нет свойства, которое позволило бы сделать смену изображений при прокрутке, поэтому мы воспользуемся Javascript.
Фиксированный фон для сайта
Возможно вы не поняли о чем я пишу, поэтому посмотрите демо и вы сами увидите этот красивый эффект:
Скачать
Как же сделать меняющийся фон для сайта?
HTML
Начнем мы с того, что определим HTML структуру страницы, для которой делаем этот эффект:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id = "cbp-fbscroller" class = "cbp-fbscroller" > |
В теге мы определили навигацию по блокам с разными изображениями. На этом с HTML разметкой закончили. Переходим к стилям.
CSS
Что касается стилей, то их здесь не очень много.
Делаем высоту блока на всю максимально возможную. То есть на высоту окна браузера пользователя.
| 1 2 3 4 5 6 | html , body , .container, .cbp-fbscroller, .cbp-fbscroller section { height : 100% ; } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .cbp-fbscroller > nav { position : fixed ; /* меню всегда на одном месте */ z-index : 9999 ; /* ничто не должно перекрывать меню */ right : 100px ; /* оно находится от правого края на 100 пикселей */ top : 50% ; /* и по вертикали по середине страницы */ width : 26px ; /* ширина меню */ -webkit-transform : translateY(-50% ) ; -moz-transform : translateY(-50% ) ; -ms-transform : translateY(-50% ) ; transform : translateY(-50% ) ; } /* ниже идут стили для каждого элемента (ссылки) в меню */ .cbp-fbscroller > nav a { display : block ; position : relative ; z-index : 9999 ; color : transparent ; width : 26px ; height : 26px ; outline : none ; margin : 25px 0 ; border-radius : 50% ; border : 4px solid #fff ; } .no-touch .cbp-fbscroller > nav a :hover { background : rgba(255 , 255 , 255 , 0.6 ) ; } .cbp-fbscroller > nav a.cbp-fbcurrent { background : #fff ; } |
Некоторые свойства я прокомментировал, думаю понятно какое свойство за что отвечает. Если не совсем — пишите в комментариях! 🙂
В итоге у нас получится следующее меню:
| 1 2 3 4 5 6 7 8 9 10 | .cbp-fbscroller section { position : relative ; background-position : top center ; background-repeat : no-repeat ; background-size : cover; } .no-touch .cbp-fbscroller section { background-attachment : fixed ; } |
Осталось для соответствующих блоков задать необходимые изображения:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #fbsection1 { background-image : url (../images/1 .jpg) ; } #fbsection2 { background-image : url (../images/2 .jpg) ; } #fbsection3 { background-image : url (../images/3 .jpg) ; } #fbsection4 { background-image : url (../images/4 .jpg) ; } #fbsection5 { background-image : url (../images/5 .jpg) ; } |
Остался Javascript!/ script > <script > $(function() { cbpFixedScrollLayout.init(); }); </ script >
Вывод
На этом всё. Красивый эффект, да и не составит труда, я думаю, вставить его себе на сайт! Желаю вам успехов, если появятся проблемы с установкой — пишите в комментариях 🙂 .
P.S.: Я изменил дизайн сайта. На мой взгляд он более современный и удобный.
Краткая информация
Версии CSS
Значения
fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым. inherit Наследует значение родителя. local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.HTML5 CSS2.1 IE Cr Op Sa Fx
HTML5 CSS3 IE Cr Op Sa Fx
Объектная модель
document.getElementById("elementID ").style.backgroundAttachment
Браузеры
В браузере Internet Explorer 6 значение fixed работает только для тегов
или .Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Chrome поддерживает значение local с версии 4.0.
Safari поддерживает значение local с версии 5.0.
Firefox не понимает значение local .
При установке неподвижной картинки фона под таблицу, в которой у нас будет располагаться текст и прочая полезная информация, создаётся следующий эффект: при прокрутке таблицы с текстом фон под ней остаётся неподвижным, а не сдвигается вместе с таблицей. Как здесь:
Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах.
Обычно эффекта неподвижной картинки фона добиваются с помощью
постановки в таблицу стилей CSS следующих атрибутов: background-attachment: fixed; Речь идёт о таблице стилей CSS, которая у вас находится в отдельном документе с расширением.css
Есть несколько способов установить то, что нам нужно.
1-й способ.
Выбираем картинку, которая будет у нас фоном. В данном случае я беру вот такую картинку (кликните по миниатюре, чтобы увидеть полный размер):
В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:
BODY{background-image: url(адрес картинки фона); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}
В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).
Примечание: Если у вас нет документа стилей css, то вам необходимо создать его, как указано в - и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.
Итак, вот какие параметры мы задаём при помощи стилей:
Background-image: url(адрес картинки фона); - прописываем адрес нашей фоновой картинки 1280 на 1024 px.
Background-attachment: fixed; - задаём фону указание оставаться фиксированным, то есть, неподвижным.
Background-repeat: no-repeat; - задаём фону указание не размножаться.
Background-position: top; - задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.
Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:
BODY{background-image: url(адрес картинки фона); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}
Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).
2-й способ.
Попробуем поставить маленькую картинку, которая будет автоматически повторяться и заполнять всё пространство страницы, образовывая узор фона. Вот эта картинка:
При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:
BODY {background-image: url(адрес картинки фона); background-attachment: fixed; }
Здесь мы задали только параметр: background-attachment: fixed; - то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке "не размножаться" - она должна у нас размножиться на весь экран.
3-й способ.
Попробуем установить фоновую картинку с одной стороны, а таблицу с текстом и картинками на странице расположить с противоположной стороны, чтобы она не загораживала собой фоновую картинку. Для этого пропишем в документе css следующее:
BODY { background:#e0ddd8 url(адрес картинки фона) no-repeat fixed left top }
Background:#e0ddd8 url(адрес фоновой картинки) - цвет под фоновой картинкой - бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).
No-repeat - картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров - Робертом Дювалем).
Fixed - фон зафиксирован, то есть неподвижный.
Left top - выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта - слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете: