Фиксированный фон в CSS (background-attachment)


Здравствуйте, уважаемые читатели сайта Uspei.com. Сегодня мы успеем изучить фиксацию фона, благодаря свойству

 background-attachment: fixed;

эта возможность позволяет фиксировать изображение при прокрутке окна браузера. Данное изображение всегда остается на месте, где оно было зафиксировано и используется это для вкладок блога, службы поддержки, социальных кнопок и т.д.Фиксированное изображение

фиксированные элементы

 

Так вот, наша сегодняшняя задача сделать такую же фишку. Как разместить данное изображение (всегда предварительно оптимизируйте изображения перед загрузкой) в определенном месте мы уже знаем, но как заставить его зафиксироваться?! Давайте приступим и попробуем это сделать, как на данном скрине.

Создадим такой фиксированный элемент

Теперь давайте разберемся куда мы можем поставить данное фоновое изображение. У нашего тега body, а также у блока div и Н1 уже есть фоновые картинки, а как мы знаем 2 изображения поставить нельзя (смотрите прошлые уроки). Но все очень просто: мы можем создать еще бесчисленное количество блоков div с другими идентификаторами внутри тега body, на фон которого поставить изображение. Для удобства в написании можно использовать аналогичный сдвиг строк, чтобы видеть где какой блок начинается и заканчивается, а также какой блок внутри другого.

<body>
 <div id="wrapper">
 <div id="main">
 <H1>Company: EvCorporation</H1>
 </div>
 <div>
</body>

Теперь давайте пропишем outline нашему новому блоку, чтобы видеть его границы. По окончанию работы это свойство можно просто удалить.

#wrapper {
 outline: 1px solid #cc0000;
 }

wrapperВот появился наш блок, который по вертикали занял расстояние равное высоте контента, а по горизонтали все свободное пространство тега body. Но мы не можем проверить нашу работу, так как для этого мы должны прокрутить страницу браузера, а такой возможности пока у нас нет. Для этого давайте увеличим размер нашего блока с 421px до 991px, чтобы появилась полоса прокрутки.

#main {
 outline: 1px solid #FAA21A;
 width: 800px;
 height: 991px;
 margin: 29px auto;
 background-image: url (.../images/bg_s.jpg);
 background-repeat: repeat-x;
 }

Увеличили height И теперь, когда появилась полоса прокрутки мы на фон нашего блока div ставим это изображение. Запрещаем повторение и указываем положение.

#wrapper {
 outline: 1px solid #cc0000;
 background-image: url (.../images/tel.jpg);
 background-repeat: no-repeat;
 background-position: 0 120px;
 }

Теперь если обновить браузер появилось наше изображение, но при прокрутке окна оно зафиксировано на месте и не прокручивается вместе с окном. Для этого нам необходимо прописать новое свойство, которое закрепит изображение относительно окна браузера.

 #wrapper {
 outline: 1px solid #cc0000;
 background-image: url (.../images/tel.jpg);
 background-repeat: no-repeat;
 background-position: 0 120px;
 background-attachment: fixed;
 }

Мы зафиксировали элементТеперь при прокрутке окна, наш логотип с телефонами остается на месте относительно окна браузера, что очень часто используется при дизайне кнопок "службы поддержки", ссылки на блог или панели с социальными кнопками.

Читайте также:  Что такое таблица стилей CSS, ее селекторы и свойства

Ну и в конце нашего занятия давайте вновь сократим наши свойства уместив все в одну строчку. Мы просто пишем общее свойство background и далее просто перечисляем в строчку все его значения! Все просто!

#wrapper {
 background:url(../images/tel.jpg) no-repeat 0 120px fixed;
 }

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях

Вам также понравится...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *