Как закрепить background css

background-attachment

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.

Синтаксис

background-attachment: fixed | scroll | inherit

background-attachment: fixed | scroll | local[, fixed | scroll | local]*

Значения

fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым. inherit Наследует значение родителя. local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

HTML5 CSS2.1 IE Cr Op Sa Fx

        
Пример текста
  

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundAttachment

Браузеры

В браузере Internet Explorer 6 значение fixed работает только для тегов или .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Chrome поддерживает значение local с версии 4.0.

Safari поддерживает значение local с версии 5.0.

Firefox не понимает значение local .

CSS по теме

Прилипающий блок CSS

Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.

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

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну, сделав отступ в -2em от верхнего края окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента на более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: -2em; margin-bottom: -2em; padding-top: 2em; > .sticky div 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

1
2
3
4
5
6
7
8
9
10
11
12

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

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

1
2
3
4
5
6
7
Прилипну то к нижнему краю окна браузера, то к верхнему
8
9
10
11
12
13
14
15

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Буду показан под зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: 0; min-height: 2em; background: lightpink; >.relative 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Буду показан над зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: 0; z-index: 1; min-height: 2em; background: lightpink; > .relative 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

4
5
6
7
8
9
10
11
12

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12

Прилипну внутри блока, который можно проскроллить, а не к краю окна браузера
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; /* добавить полосу прокрутки */ height: 10em; border: 1px solid red; > .sticky 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Почему не работает position: sticky;

Высота элемента с position: sticky; равна высоте ближайшего родителя

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Достигнуто конечное положение

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Не прилипну

  1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

У не прокручиваемого родителя, стоящего внутри прокручиваемого, определён overflow отличный от visible

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 
1 
2 
3 4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15
 

Все четыре свойства top , right , bottom , left имеют значение по умолчанию auto

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Примеры

Как сделать плавающий блок на сайте: меню, баннер

  
Название
  
Основная часть
 
 
  

Как закрепить шапку HTML-таблицы

    Заголовок Заголовок Заголовок  Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
Название таблицы
 

Как расположить HTML-картинки в одну строку с прикрепляющимся слева описанием

 .raz < overflow: auto; border: 1px solid red; white-space: nowrap; /* не переносить на другую строку inline-элемент */ > .raz figure < display: inline-flex; margin: 0; >.raz figcaption < position: sticky; left: 0; /* для IE */ writing-mode: tb-rl; /* для Mozilla Firefox */ width: 1em; padding: 1em; line-height: 1; writing-mode: vertical-rl; /* перевернуть текст */ text-align: center; /* выравнять текст по середине */ background: rgba(255,255,255,.9); > .raz img 
 
 
 
 
 
 
 
 
  
 
 

Закрепить footer внизу страницы

Дело в том, что при заполнении основной ленты, страница растягивается, а футер остается на своем месте поперек основной ленты. Как закрепить футер внизу страницы, чтоб не fixed, а появлялся, только тогда, когда прокрутили ленту вниз?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Footer внизу страницы (нетривиальный вариант)
Добрый вечер! Не могу никак додуматься, как грамотней решить проблему. Бьюс не первый час. В чем.

Помогите удержать footer внизу страницы!
Я знаю, что инструкции по моему вопросу есть на каждом углу, но мне попался тут один шаблон, никак.

Необходимо закрепить шапку и footer при масштабировании страницы в браузере
Добрый день, нашла вашу тему, очень близка мне по тематике. Есть сайт tagansorbent.kz, на котором.

Расположить фиксированное меню под футером и закрепить внизу страницы
Добрый день, я сверстал сайт типа "landing page",но мне надо сделать, так что бы когда пользователь.

130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
пропишите для футера

1 2 3 4 5

.footer{ position: absolute; bottom: 0; height: 80px; }

выложите пожалуйста хтмл и css коды посмотреть

Добавлено через 21 минуту
помотрев ваш код можно сказать что то

Регистрация: 05.07.2012
Сообщений: 130

Покой фиг применять к футеру позиционирование. о_О
Просто поочередно блоки пишите: шапка, тело, подвал.
типа:

1 2 3

div class="header">/div> div class="body">/div> div class="footer">/div>

. и поищите на форуме, была тема как раз по этому поводу
Регистрация: 02.06.2013
Сообщений: 83

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.downer{ position: absolute; height: 27px; width: 100%; bottom:0px; z-index: 1; } #mainlenta{ position: absolute; left: 16%; right:16%; top: 82px; bottom: 32px; margin: 10px; }

Вот index.php:

1 2 3 4 5 6 7

 require_once("header.php"); require_once("topper.php"); require_once("tovari.php"); require_once("mainlenta.php"); require_once("footer.php"); ?>

Временно решил проблему, добавив футер к последней записи ленты, но так ведь не годится
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612

а без абсолютного позиционирования можете обойтись ? Вижу везде у вас оно.

Добавлено через 20 минут
поменяйте абсолют на релатив

Добавлено через 18 минут
вот пример с прижатием футера — все отлично работает

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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

* { margin: 0; padding: 0; } html { height: 100%; } body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; width: 100%; height: 100%; } a { color: blue; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } p { margin: 0 0 18px } img { border: none; } input { vertical-align: middle; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } /* Header -----------------------------------------------------------------------------*/ #header { height: 150px; background: #FFE680; } /* Middle -----------------------------------------------------------------------------*/ #middle { width: 100%; padding: 0 0 100px; height: 1%; position: relative; } #middle:after { content: ''; clear: both; display: table; } #container { width: 100%; float: left; overflow: hidden; } #content { padding: 0 270px 0 270px; } /* Sidebar Left -----------------------------------------------------------------------------*/ #sideLeft { float: left; width: 250px; margin-left: -100%; position: relative; background: #B5E3FF; } /* Sidebar Right -----------------------------------------------------------------------------*/ #sideRight { float: left; margin-right: -3px; width: 250px; margin-left: -250px; position: relative; background: #FFACAA; } /* Footer -----------------------------------------------------------------------------*/ #footer { width: 1000px; margin: -100px auto 0; height: 100px; background: #BFF08E; position: relative; }

328 / 202 / 63
Регистрация: 04.02.2013
Сообщений: 1,212

1 2 3 4 5

div class="wrap"> header>/header> div class="content">/div> /div> footer>/footer>

1 2 3 4 5 6 7 8 9 10

html, body {height: 100%;} .wrap {min-height: 100%;} .content {padding-bottom: 150px;} footer {position: relative; margin-top: -150px; height: 150px; clear:both;}

Регистрация: 21.05.2011
Сообщений: 49
Вот самое простое решение, может немного кривое, но работает

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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

Для крепления футера снизу необходимо: 1) Для тела боди и html документа: body, html { height: 100%; min-height: 100%; } 2) Для основного центрального блока с контентом - Page: #page { width: 100%; margin:0 auto; min-height:100%; /* для того, что бы Footer был в самом низу при пустом материале, но при этом он будет съезжать вниз на свою высоту, а при заполненном тексте, будет наезжать на текст материала на 166px (так как в самом футере будет прописан отступ -166px) */ 3) Для блока, где располагается контент и сайдбар (боковым меню) #article { padding-right: 20px; width: 720px; float: left; padding-bottom: 166px; /*Делаем внутренний отступ от материала, что бы при пустом материале Footer не съезжал на свою высоту, а также при заполненном материале он будет находится сразу под текстом с вашими отступами в родительском блоке container */ } #sidebar { width: 220px; float: right; padding-bottom: 166px; /* аналогично, это необходимо, что бы футер отступал и от сайдбара, то есть левого или правого меню, если вдруг они длиннее текста в материале */ } 4) В самом Footer прописать следующее: #footer { background: url(images/footer.jpg); width: 100%; height: 166px; margin-top: -166px; /* необходимо, что бы Footer при пустом материале поднялся вверх на свою высоту, так как при пункте "2" он съезжает вниз на свою высоту */ } В таком случае при пустом материале например на той же Joomla 3.0, Footer будет точно внизу, а при заполненном материале, Footer будет отодвигаться от него на 20px (отступ на 20px прописан в container).

Регистрация: 04.02.2017
Сообщений: 17

По мне так проще — лучше

1 2 3 4 5 6 7 8 9 10 11

/* высота для контейнера перед футером, где X=любому значению в px (подгоняйте это значение) */ .conteiner { min-height: calc(100vh - X); } /* ваш футер */ .footer { position: relative; heigth:100px; width:100% }

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Почему footer находиться не внизу?
Почему footer находиться не внизу? это возникает почему-то из-за таблицы, есть идеи как это.

Footer не держится в самом внизу
Здравствуйте, проблема такая, когда есть информация на сайте, футер как положено внизу, но когда.

Закрепить модуль внизу экрана
Подскажите пожалуйста , как сделать что бы определенный модуль всегда был внизу экрана, то есть.

Закрепить картинку справа внизу
Кто сможет подсказать как закрепить картинку справа с низу Получилось так только с верху справа .

Фиксирующаяся при скролле панель навигации, только CSS

Как закрепить панель навигации в верхней части страницы только с помощью CSS и не скроллить её вместе с контентом.

Долгое время для фиксации панели навигации требовалось использовать JavaScript, чтобы определить, когда при прокрутке страницы ей нужно добавить CSS-класс для переключения в position: absolute .

Чтобы получить аналогичный эффект, можно использовать только простое CSS-свойство.

position: sticky

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

.sticky < position: -webkit-sticky; position: sticky; top: 0; >

На первый взгляд всё работает нормально. Но, если приглядеться, клик по ссылке в навигации скроллит контент так, что заголовок секции самым бесстыдным образом оказывается под зафиксировавшейся панелью с навигацией. Это поправимо.

scroll-margin-top

Свойство scroll-margin-top укажет браузеру высоту отступа, которую он должен использовать при скролле к контейнеру. Это свойство следует указывать элементам с якорями, на которые ведут ссылки из панели навигации.

Добавим контейнерам свойство scroll-margin-top и присвоим ему значение 1em . Теперь, когда браузер перейдёт по ссылке к якорю, он оставит сверху отступ 1em .

И ещё: этот отступ применяется только к прокрутке. Сам элемент-контейнер по-прежнему сохраняет свои обычные отступы в контексте документа.

HTML-код примера фиксирующейся при прокрутке панели навигации

CSS-код примера фиксирующейся панели скролл-навигации

body < margin: 0 auto; max-width: 40em; width: 88%; >.section < color: #ffffff; height: 75vh; margin: 0; scroll-margin-top: 1em; > #a < background-color: #0074d9; >#b < background-color: #2ecc40; >#c < background-color: #ff851b; >#d < background-color: #b10dc9; >h2 < margin: 0; padding: 0; >.sticky < background-color: #ffffff; position: -webkit-sticky; position: sticky; top: 0; > .list-inline < list-style: none; margin-left: -0.5em; margin-right: -0.5em; padding: 0; >.list-inline > li < display: inline-block; margin-left: 0.5em; margin-right: 0.5em; >.list-inline > li:before < content: "\200B"; /* 1 */ position: absolute; /* 2 */ >

Пара слов о поддержке position: sticky и scroll-margin-top браузерами

Свойство position: sticky работает во всех современных браузерах, но на момент написания этой заметки не работает с элементами thead и tr в Chrome и Edge (хотя оно работает с th ), а также table в Firefox.

Свойство scroll-margin-top работает во всех современных браузерах.

Оба CSS свойства не работают в маргинальном IE-11 и более старых версиях IE.