Среда, 16 ноября, 2022

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

Последние:
Вячеслав Питель
Вячеслав Питель
Редактор сайта, опыт работы 10 лет, пишу на тему гаджетов, новостей в мире технологий, игр и софта admin@uspei.com, VK, OK, сот. 89132476241

Здравствуйте, уважаемые читатели сайта 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;
 }

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

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

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

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

- РЕКЛАМА -
- РЕКЛАМА -
Сейчас:

“Привозят, кидают на мясо – и всё”: украинские пленные рассказали, как офицеры ВСУ посылали их на захваченные позиции ДНР

Пленные украинские военнослужащие утверждают, что офицеры Вооруженных сил Украины (ВСУ) отправили их на позиции, занятые первым корпусом Народной милиции...
- РЕКЛАМА -

Также на эту тему:

- РЕКЛАМА -
Adblock
detector