background-attachment - «Справочник CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 08 декабрь 2024, 00:00
Марсоход Perseverance прислал открытку с видами на Пик Туркино, где поищет следы древней жизни - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
20-03-2016, 13:45
background-attachment - «Справочник CSS»
Рейтинг:
Категория: Справочник CSS
CSS Internet Explorer Chrome Opera Safari Firefox Android iOS
2.1 6.0 7.0 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 2.1+ 1.0+
3 9.0+ 1.0+ 10.5+ 1.3+ 3.6+ 2.1+ 1.0+

Краткая информация


Значение по умолчанию scroll
Наследуется Нет
Применяется Ко всем элементам
Процентная запись Неприменима
Ссылка на спецификацию

Версии CSS


CSS 1 CSS 2 CSS 2.1 CSS 3

Описание


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


Синтаксис


CSS2.1 
background-attachment: fixed | scroll | inherit[/code]
CSS3 
background-attachment: fixed | scroll | local[, fixed | scroll | local]*[/code]

Значения



fixed

Делает фоновое изображение элемента неподвижным.

scroll

Позволяет перемещаться фону вместе с содержимым.

inherit

Наследует значение родителя.

local

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



Пример 1


HTML5CSS2.1IECrOpSaFx


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-attachment</title>
  <style>
   body {
    background-image: url(images/help.png); /* Путь к фоновому изображению */
    background-attachment: fixed; /* Фиксируем фон веб-страницы */
   }
  </style>
 </head>
 <body>
  <div style="height:2000px">
    Пример текста
  </div>
 </body>
</html>

Пример 2


HTML5CSS3IECrOpSaFx


[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment</title>
<style>
body {
background-image: url(images/pattern-left.png), url(images/pattern-right.png);
background-repeat: repeat-y, repeat-y;
background-position: left, right;
background-attachment: fixed, fixed;
}
</style>
</head>
<body>
<div style="height:2000px">
</div>
</body>
</html>

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


[window.]document.getElementById("elementID").style.backgroundAttachment


Браузеры


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


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


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


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


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


CSS Internet Explorer Chrome Opera Safari Firefox Android iOS 2.1 6.0 7.0 8.0 1.0 3.5 1.0 1.0 2.1 1.0 3 9.0 1.0 10.5 1.3 3.6 2.1 1.0 Краткая информация Значение по умолчанию scroll Наследуется Нет Применяется Ко всем элементам Процентная запись Неприменима Ссылка на спецификацию Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую. Синтаксис CSS2.1 CSS3 Значения fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым. inherit Наследует значение родителя. local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте. Пример 1 HTML5 CSS2.1 IE Cr Op Sa Fx Пример 2 HTML5 CSS3 IE Cr Op Sa Fx _

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.


Теги: CSS, background-attachment

Просмотров: 9 770
Комментариев: 0:   20-03-2016, 13:45
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР