background-attachment
Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
Синтаксис
background-attachment: fixed | scroll | inheritbackground-attachment: fixed | scroll | local[, fixed | scroll | local]*Значения
fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым. inherit Наследует значение родителя. local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
HTML5 CSS2.1 IE Cr Op Sa Fx
background-attachment Пример текста HTML5 CSS3 IE Cr Op Sa Fx
background-attachment Объектная модель
[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 по теме
Как закрепить картинку, чтобы она не смещалась?
Как закрепить картинку, чтобы она не смещалась? На 2 скр. увеличил масштаб,а на 3 скр. уменьшил масштаб, 1 скр. не изменял вообще. Нужно, чтобы вот так смотрелось даже при увеличении масштаба или уменьшения. Код такой:
style='position:fixed; right: 472px; top:42px; border:0 !important; opacity: 0.8; height: 16px !important; width: 27px !important;' Отслеживать
4,286 14 14 золотых знаков 42 42 серебряных знака 92 92 бронзовых знака
Как зафиксировать блок с картинкой?
То есть прижать к верху посредством fixed. При этом высота блока динамическая, за счет уменьшения высоты картинки во время сужения экрана.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Зафиксировать (совместить) слои с фоновой картинкой
Добрый день. Возникла проблема с совмещением кучи мелких слоёв и фоновой картинки. Вот пример.
Как зафиксировать блок?
У меня есть блок с верху(картинка 1) Но когда браузер сворачуешь в маленькое окошко то получается.
Как зафиксировать блок на сайте?
При изменении размеров окна браузера блок #servises съезжает влево, что полностью ломает картину.
Как расположить блок с картинкой?
У меня есть большая картинка. Я хочу сделать её фоном. И именно через блок-div (не body). Картинка.
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
Установить блоку position:fixed; top:0; ?
Регистрация: 18.01.2016
Сообщений: 195
AlexZaw,
Сообщение от AlexZaw 
Установить блоку position:fixed; top:0;
Сам верхний блок зафиксируется. Но нижний блок с контентом, уйдет под него.
Для этого обычно верхнему блоку дают высотку или нижнему блоку отступ. Но это не подходит в ситуации где высота верхнего блока динамичная.
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
А что мешает динамически получать высоту фиксированного блока и менять отступ у нижнего блока?
Регистрация: 18.01.2016
Сообщений: 195
Сообщение от AlexZaw
А что мешает динамически получать высоту фиксированного блока и менять отступ у нижнего блока?
И как это реализовать?
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
Примерно так:
1 2 3 4 5 6
div id="fixed"> img src="http://placekitten.com/g/1000/200" alt=""> /div> div id="content"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore sit animi ut odio debitis, quas vel voluptatem praesentium, laborum error maiores molestiae nisi expedita eum neque nemo. Molestias, voluptate et. /div>
1 2 3 4 5 6 7
img{ max-width: 100%; } #fixed{ position: fixed; top: 0; }
1 2 3 4 5 6 7 8
var content = document.getElementById('content'); window.onresize = changeMarginTop; function changeMarginTop() { var fixed = document.getElementById('fixed').offsetHeight; content.style.marginTop = fixed + 'px'; } changeMarginTop()
Регистрация: 18.01.2016
Сообщений: 195
Сообщение от AlexZaw
1 2 3 4 5 6 7
var content = document.getElementById('content'); window.onresize = changeMarginTop; function changeMarginTop() { * * var fixed = document.getElementById('fixed').offsetHeight; * * content.style.marginTop = fixed + 'px'; } changeMarginTop()
Супер. Спасибо. Значит все таки нужен JS.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Зафиксировать блок после того как окно браузера достанет
Есть блок, расположен он по центру экрана, как его зафиксировать на экране именно в тот момент.
Зафиксировать блок
Здравствуйте, на сайте имеется номер телефона и адрес с одинаковыми стилями, но при уменьшении окна.
Адаптивный блок с картинкой
Подскажите, как сделать адаптивный блок с рамкой, внутри слева картинка, справа от картинки текст с.
Зафиксировать блок страницы. Подскажите решение
Здравствуйте Подскажите пожалуйста, как можно зафиксировать блок страницы, который находится не.
Курсы javascript
Подскажите, пожалуйста, как закрепить изображение, примерно как здесь, только чтобы при прокрутке оставалась на месте.
23.02.2013, 16:39
Регистрация: 11.09.2010
Сообщений: 8,804
html < height: 600px; >img
23.02.2013, 16:45
без статуса
Регистрация: 25.05.2012
Сообщений: 8,219
23.02.2013, 16:53
Регистрация: 23.01.2013
Сообщений: 53
эм. я, походу, неправильно объяснил) мне нужно, чтобы изображение оставалось на определенном месте на странице и чтобы при прокрутке вниз оно оставалось наверху. как обычная вставка изображения только чтобы ложилось поверх всего и не зависело от других объектов, как с fixed, только без перемещения при прокрутке.