CSS. Фиксация фона (Урок 9)

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

CSS

 

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

CSS

 

Теперь давайте разберемся куда мы можем поставить данное фоновое изображение. У нашего тега 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;

}

CSS

Вот появился наш блок, который по вертикали занял расстояние равное высоте контента, а по горизонтали все свободное пространство тега 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;

}

CSS

 

И теперь, когда появилась полоса прокрутки мы на фон нашего блока 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 и далее просто перечисляем в строчку все его значения! Все просто!

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

 

Удачи! Увидимся в следующем уроке.

 

Урок подготовлен по материалам Евгения Попова, который является грамотным специалистом в данной теме. Я когда-то сам проходил обучение по его видео-курсу «Все технические моменты онлайн-бизнеса в видеоформате», с которым вы при желании можете ознакомится по этой ссылке.
Видео-курс Е. Попова
Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


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

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

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

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