HTML\CSS → Как зафиксировать фон при прокрутке
С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокрутке. Значение свойства:
scroll — фон прокручивается вместе с содержимым (по умолчанию).
fixed — фон не прокручивается, зафиксирован на одном месте.
body < background-image: url('texture.jpg'); background-repeat: no-repeat; background-attachment: fixed; >
CSS-трюк: фиксируем большой бэкграунд относительно контента
В статье используется изображение из примера к статье How to: CSS Large Background. Рассмотрим такую ситуацию — нужно создать страницу фиксированной ширины, к примеру, 900 пикселей, с контентом, расположенным горизонтально по центру относительно окна браузера. И необходимо на этой странице поместить большой фон (тоже горизонтально по центру), ширина которого значительно больше ширины нашего отцентрированного блока с контентом. Фон размещается элементарно — его мы прицепляем тегу и центрируем горизонтально. При этом имеем следующую структуру кода: HTML:
CSS:
body < background: url(background.jpg) 50% 0 no-repeat; >#wrapper
Для наглядности посмотрим пример № 1. Если вы станете сужать окно браузера, то с того момента, когда появится горизонтальная прокрутка, вы заметите, что фоновое изображение сдвигается влево относительно контента (за исключением браузеров IE6 и IE7). Наша задача — зафиксировать изображение. Данную неприятность позволяет устранить один очень простой трюк. Суть его заключается в том, что к родительскому блоку контейнера, у которого задан фон, необходимо применить параметр минимальной ширины, равной ширине контентного блока. В нашем случае мы укажем минимальную ширину тегу , поскольку он является «родителем» тега , к которому мы прицепили фон. всего-навсего добавляем такой стиль:
html
Вот и все. Теперь посмотрите пример № 2 и попробуйте сузить окно браузера — фон больше никуда не съезжает, чего нам и требовалось добиться.
Смотрите также
CSS-трюк: двойные бордюры-разделители вертикального меню
28 комментариев
Когда при верстке требуется создать меню с разделителем, я использую замечательную технику, которую когда-то давно предложил Юрий «akella» Артюх. Недавно я столкнулся с очень похожей, но более сложной задачей — мне нужно было сверстать вертикальное меню, .
Верстка красивых тегов для сайта + бонус
25 комментариев
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить .
Зеленый свет CSS-свойствам при верстке под IE8 и выше
26 комментариев
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. .
Комментарии (60)
Очень нужна помощь пожалуйста, создал фоновую картинку под мню с position: fixed;
и вот когда сужаю окно браузера фоновая картинка уезжает влево
что делать не представляю помогите
тест сайт
Попробуйте фиксированный блок сделать на всю ширину браузера и без фона, а в него уже вставить блок с position: absolute, у которого будет фон.
я извиняюсь
могли бы вы помочь с написанием кода
я мягко говоря со знаниями (в предбаннике)
Могу дать доступ к админке.
Я вот попробовал этот фон прикрутить к меню, что-то получилось
в лево не уходит.
Но теперь не могу позиционировать этот фон.
Такую фишку увидел здесь
Но не могу повторить код.
Буду очень благодарен.
Как зафиксировать сайт, чтобы он не скролился пальцем вправо-влево на телефоне, оголяя белый фон?
Сделал простой сайт лендинг. Он адаптивный и нормально работает на любых экранах.
Проблема в том, что на телефоне или планшете его можно пальцем поскролить горизонтально, хотя вся информация отлично помещается без скрола, а там открывается просто белый фон. Получается что сайт «болтается вправо-влево» при обычном вертикальном скроле пальцем, когда скролишь небрежно, не строго вертикально.
Как решить эту проблему?
Правильно ли я понимаю, что будет достаточно запретить горизонтальную прокрутку на тач скрине? Как это сделать?
- Вопрос задан более трёх лет назад
- 5248 просмотров
Фиксированный меняющийся фон для сайта
Этот небольшой урок будет о том как сделать у себя на сайте (или на одностраничнике) красивый фиксированный фон, который будет плавно перетекать из одного изображения в другое при прокрутке страницы пользователем. В 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"> a href="#fbsection1" class="cbp-fbcurrent">Блок с первым изображением/a> a href="#fbsection2">Блок со вторым изображением/a> a href="#fbsection3">Блок с третьим изображением/a> a href="#fbsection4">Блок с четвертым изображением/a> a href="#fbsection5">Блок с пятым изображением/a> /nav> id="fbsection1">/section> id="fbsection2">/section> id="fbsection3">/section> id="fbsection4">/section> id="fbsection5">/section> /div>
В теге мы определили навигацию по блокам с разными изображениями. На этом с 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
- jquery.easing.min.js
- cbpFixedScrollLayout.min.js
1 2 3 4 5 6 7 8
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">/script> script src="js/jquery.easing.min.js">/script> script src="js/cbpFixedScrollLayout.min.js">/script> script> $(function() < cbpFixedScrollLayout.init(); >); /script>
Вывод
На этом всё. Красивый эффект, да и не составит труда, я думаю, вставить его себе на сайт! Желаю вам успехов, если появятся проблемы с установкой — пишите в комментариях �� .
P.S.: Я изменил дизайн сайта. На мой взгляд он более современный и удобный.