Полностью адаптивный фон с использованием CSS. Фиксированные, прокручивающиеся фоновые изображения Как зафиксировать фоновое изображение css
Краткая информация
Версии 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 .
Практически каждый популярный сайт имеет приятный внешний вид. В дизайне сайта важной частью является фон, который также называют background, который каждый из нас может создать или изменить. В этом материале я расскажу как поставить фон на сайт.
Делаем новый фон для сайтов
Для выполнения поставленной задачи, Вы можете воспользоваться одним из 4-ех способов:
- 1. Фон с одного цвета
- 2. Фон с текстуры
- 3. Фон с помощью градиента
- 4. Фон с большого изображения
Создаем фон с помощью одного цвета
Чтобы создать или изменить задний фон сайта, который состоит из одного цвета, необходимо перейти в файл style.css , в котором отыскать значение - body (оно отвечает за основное тело сайта). Теперь Вам необходимо прописать функцию background-color если ее не было и указать код цвета. В том случае, когда Вам необходимо создать задний фон для сайта белого цвета, то придется прописать следующий код:
background-color: #83C5E9 ; (синий фон, как на примере)
Вы сможете найти полный перечень цветов на сайте - (STM). Для изменения цвета, просто изменяйте значение после двоеточия и наслаждайтесь своими трудами.
Создание фона при помощи текстуры
Данный метод особенно популярен в последнее время, так как позволяет сделать красивый background для сайта. Текстуры могут быть простыми, но очень красивыми, именно поэтому их часто используют. Для того чтобы подключить любую текстуру, ее необходимо загрузить в папку image на хостинг, где установлен Ваш сайт. После этого следует прописать следующий код:
background-color: #537759;
background-image: url(images/pattern.png);
В этом коде есть знакомый нам параметр для поддержания цвета (он зеленый) и элемент, который отвечает за подключение текстуру зеленого цвета.
Делаем фон с помощью градиента
Любое изображение, которое подключается за счет css функций, можно повторять, как по горизонтали, так и по вертикали (по осям X и Y ). Такая возможность позволяет нам создать любой простой фон для сайта своими руками. Для этого необходимо создать градиент шириной в 1 мегапиксель (см. картинку ниже), сохранить его как изображение и загрузить на хостинг. После этого можно прописывать необходимый код, а именно:
background-color: #83C5E9;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
В этом наборе, в порядке очереди идет функция, отвечающая за цвет фона, который мы используем для перестраховки. После этого параметр, который отвечает за подключение градиента и наконец, функция, которая отвечает за повторение градиента по оси X.
Используем большую картинку для фона сайта
Этот метод второй по популярности, так как позволяет использовать различные картинки для создания фона. Для реализации этого метода Вам необходимо лишь загрузить большое изображение в папку с картинками сайта и прописать следующий код:
background-color: #000000;
background-image: url(images/название картинки.jpg);
background-position: center top;
background-repeat: no-repeat;
Если с первыми двумя параметрами все понятно, то последние два необходимо осветить. Третья функция позволяет закрепить изображение по центру сайта, а последний параметр блокирует его повторение по всей структуре страницы.
Изменяем фон на сайтах ucoz
Те способы создания фона для сайта могут быть использованы на разных системах управления сайтами, но не на сайтах - ucoz. Для того чтобы изменить фон для сайта ucoz, необходимо перейти в панель управления сайтом, зайти в «Управлением дизайном» , а потом в «Редактирование шаблонов» .
Теперь необходимо открыть Таблицу стилей (CSS), найти строчку «body» и параметр «background» . После этого нужно скопировать ссылку, вставить ее в интернет - браузер и вы получите доступ к картинке, которая была фоном.
Для использования нового фона, необходимо просто загрузить его в Файловый менеджер. При этом проследите, чтобы название новой картинки для фона было тем же, что и до изменения. Сохраните свои работы и перейдите на сайт, для просмотра проведенной работы.
Изменяем фон для сайта на HTML
Если вы хотите фон на html сайте сделать за счет изображения, то просто в коде впишите строчку:
А если хотите сделать фон сайта при помощи цвета, то строчка должна выглядеть вот так:
На этом наш рассказ завершается. Теперь вы знаете как сделать фон для сайта. Удачных проектов!
Этот небольшой урок будет о том как сделать у себя на сайте (или на одностраничнике) красивый фиксированный фон, который будет плавно перетекать из одного изображения в другое при прокрутке страницы пользователем. В 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 — свойство background-size . Без JavaScript :
ПРИМЕР
СКАЧАТЬ ИСХОДНИКИ
Примеры использования адаптивных фоновых изображений
На сегодняшний день очень популярны сайты, в которых фоновое изображение покрывает всю отображаемую область страницы.
Ниже приведены некоторые из таких веб-сайтов:
Sailing Collective
Digital Telepathy
Marianne Restaurant
Если вы хотите добиться схожей «внешности » в вашем проекте — вы на правильном пути.
Основные понятия
Вот план нашей игры.
Используем свойство background-size для покрытия всей области просмотра
CSS -свойство background-size может принимать значение cover . Значение cover предписывает браузеру автоматически и пропорционально масштабировать фоновое изображение по длине и ширине таким образом, чтобы оно оставалось равным, или же больше, чем ширина/высота области просмотра.
Используем медиа-запрос при получении уменьшенной версии фонового изображения для мобильных устройств
Для уменьшения времени загрузки страницы на маленьких разрешениях экрана мы будем использовать медиа-запрос, чтобы получить уменьшенную версию фоновой картинки. Но это не обязательно и можно опустить. Данная технология прекрасно работает и без этого.
Но все же использовать уменьшенные версии фона для мобильных устройств идея неплохая, и я объясню почему.
Изображение, которое будет использовано в примере, имеет размер около 5500
на 3600px
.
С этим разрешением мы имеем в плюсе то, что добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время, но в минусе имеем размер изображения. Это около 1,7 Мб.
Оставлять такой объем для загрузки одного лишь фонового изображения не очень хорошая идея в любом случае, а в случае с мобильными устройствами это очень плохая идея. К тому же, подобное разрешение просто излишне на экранах с маленьким разрешением (об этом я расскажу подробнее позже ).
Итак. Приступим.
HTML
Ниже показано все, что понадобится из разметки:
...Содержимое вашей страницы...
Мы назначим фоновое изображение элементу body и таким образом добьемся полного покрытия фоном.
Однако эта техника сработает на любом блочном элементе (таком как div или form ). В случае если ширина-высота вашего блочного контейнера подвижна, фоновое изображение будет также менять размер, чтобы занять всю область контейнера.
CSS
Мы объявляем свойства элемента body следующим образом:
body { /* Местоположение фоновой картинки */ background-image: url(images/background-photo.jpg); /* Фоновое изображение выровнено по центру в горизонтальной и вертикальной плоскостях */ background-position: center center; /* Фон не повторяется */ background-repeat: no-repeat; /* Фон зафиксирован в области просмотра и потому не двигается, когда высота контента превышает высоту изображения */ background-attachment: fixed; /* Это свойство заставляет фон менять масштаб при изменении размеров содержащего его контейнера*/ background-size: cover; /* Цвет фона, который будет отображаться при загрузке фоновой картинки*/ background-color: #464646; }
Самое важное свойство-значение в этом списке:
background-size: cover;
Стоит заострить на нем внимание. Здесь и происходит чудо. Эта пара значения-свойства и дает указание браузеру на масштабирование фонового изображения в таких пропорциях, что высота-ширина будет оставаться равной или превышать высоту-ширину самого элемента. (В нашем случае этот элемент — body .)
И тут возникает неприятная ситуация с парой свойство-значение. В случае, когда фоновое изображение будет иметь меньшее разрешение, чем размеры элемента body , а случиться это может либо при отображении страницы на экранах высокого разрешения, либо же когда у вас тонны контента на странице, — браузер будет растягивать изображение.
А как вы знаете, когда мы растягиваем изображение сверх его настоящего размера — мы теряем качество изображения (другими словами появляется пикселизация ):
Когда изображение масштабируется в сторону увеличения родного размера — падает качество изображения .
Не забудьте об этом, когда будете подбирать фон. В демо-примере мы используем фото размером 5500 на 3600px для больших экранов, и потому в этом случае вряд ли произойдет нечто подобное.
Для того чтобы наш фон был выровнен по центру, мы объявили следующее:
background-position: center center;
Это установит масштабирующие оси в центр области просмотра.
Мы сделаем вот что. Установим свойство background-attachment в значение fixed , чтобы быть уверенными в том, что изображение останется на своем месте, даже если мы будем скролить страницу вниз:
background-attachment: fixed;
В демо пример я включил возможность «загрузить некий контент » для того, чтобы вы смогли пронаблюдать поведение фона при прокрутке страницы.
Все что вам остается сделать — скачать демо-пример и немного поэкспериментировать со свойствами позиционирования (background-attachment и background-position ) чтобы увидеть, как они влияют на поведение страницы и фона при прокрутке.
Следующие значения свойств говорят сами за себя.
Краткая запись CSS
Выше, для наглядности, я определял CSS — свойства в полном виде.
А так выглядит краткая запись:
body { background: url(background-photo.jpg) center center cover no-repeat fixed; }
Все, что вам остается сделать, это сменить значение url на путь к вашей картинке.
Опционально: медиа-запрос на получение уменьшенной версии фоновой картинки
Для экранов с меньшим разрешением нам понадобится Photoshop для пропорционального уменьшения разрешения картинки до 768 на 505px . Также я пропустил ее через Smush.it для уменьшения размера файла. Это позволило уменьшить размер с 1741 до 114 килобайт. Это уменьшило объем файла на 93%.
Не поймите меня неправильно, но 114 килобайт это все равно довольно много для использования в некоторых видах веб-дизайна. И мы будем загружать эти 114 килобайт только в случае необходимости, потому как, смотря на статистику, следует находить компромиссы между дизайном для настольных и мобильных устройств.
А вот и сам медиа-запрос:
Ключевая часть медиа-запроса заключена в свойстве max-width: 767px , которое, в нашем случае, означает, что если область просмотра браузера больше чем 767px — используется большое изображение.
Минус этого способа состоит в том, что, если вы изменяете размер окна браузера, с, допустим, 1200px до 640px (или наоборот ), вы увидите мерцающий экран, пока меньшее или большее изображение будет подгружаться.
И вдобавок, из-за того, что некоторые мобильные устройства могут работать в большем разрешении — к примеру, iPhone 5 с Retina -дисплеем разрешением в 1136 на 640px , меньшее изображение будет выглядеть некрасиво.
В этом уроке мы расскажем как создать множество фоновых изображений, которые будут сменять друг друга при прокрутке страницы.
Сегодня в интернете можно увидеть множество сайтов с параллакс-эффектом. Похожий эффект можно реализовать через CSS. По идее нужно просто применить параллакс эффект к фоновым изображениям. Для этого ознакомьтесь с CSS свойством background-attachment .
Создание структуры
HTML очень прост: чередуем элементы
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
Стили
Значение по умолчанию для свойства background-attachment равно scroll , что означает прокрутку фона вдоль элемента. Если же задать значение fixed , то позиция будет фиксированной.
Body, html, main { /* important */ height: 100%; } .cd-fixed-bg { min-height: 100%; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; } .cd-fixed-bg.cd-bg-1 { background-image: url("../img/cd-background-1.jpg"); } .cd-fixed-bg.cd-bg-2 { background-image: url("../img/cd-background-2.jpg"); } .cd-fixed-bg.cd-bg-3 { background-image: url("../img/cd-background-3.jpg"); } .cd-fixed-bg.cd-bg-4 { background-image: url("../img/cd-background-4.jpg"); } .cd-scrolling-bg { min-height: 100%; }