Здравствуйте, уважаемые читатели сайта 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;
}
Вот появился наш блок, который по вертикали занял расстояние равное высоте контента, а по горизонтали все свободное пространство тега 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;
}
И теперь, когда появилась полоса прокрутки мы на фон нашего блока 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;
}
Теперь при прокрутке окна, наш логотип с телефонами остается на месте относительно окна браузера, что очень часто используется при дизайне кнопок “службы поддержки”, ссылки на блог или панели с социальными кнопками.
Ну и в конце нашего занятия давайте вновь сократим наши свойства уместив все в одну строчку. Мы просто пишем общее свойство background и далее просто перечисляем в строчку все его значения! Все просто!
#wrapper {
background:url(../images/tel.jpg) no-repeat 0 120px fixed;
}