background-attachment | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Главная » Справочник CSS3 » Свойства фона


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


background-attachment | Свойство CSS

background-attachment фиксирует фон сайта




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





Браузеры поддеживающие свойство background-attachment

Mozilla FirefoxGoogle ChromeOperaInternet ExplorerSafariAndroid


Применимые значения к свойству background-attachment

ЗначениеОписание значения
scroll

Значение по умолчанию. Фоновое изображение будет прокручиватся если появится скроллинг, вместе со скроллингом.

fixed

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

inherit

Свойство фона будет унаследовано от родительского элемента.

local

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



Синтаксис свойства background-attachment

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


DOM объектная модель свойства background-attachment

Свойство background-attachment может быть применено к элементу с помощью скрипта, для этого элемент должен быть идентифицирован именем селектора.


<script>
document.getElementById("id").style.backgroundAttachment='scroll';
</script>


Пример применения свойства background-attachment

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство background-attachment</title>
<style type="text/css">
<!--
body {
background-image: url('//delaisait.ucoz.ru/img/delaisait_50px_ogon.gif');
background-repeat:no-repeat;
background-attachment: fixed;
}
p {
color:red;
text-decoration:blink;
}
div {
text-align:center;
}
-->
</style>
</head>
<body>
<div>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
<p>Положение рисунка фиксированное и не прокручивается</p>
</div>
<br>
</body>
</html>


Пример применения в действии



Редактор для экспериментов

Вы можете поэкспериментировать с изменениями значений свойства background-attachment, для этого поместите код из примера и вносите в него свои изменения, они будут отображены в реальном времени.





Русские шрифты






Источник: http://www.w3.org/TR/css3-background/#the-background-attachment
Категория: Свойства фона | Добавил: IZOTOP (25.03.2012) | Автор: Меренков Михаил W
Просмотров: 1605 | Комментарии: 2 | Теги: css, Scroll, свойство, Fixed, background-attachment | Рейтинг: 5.0/1

Вопросов / Советов / Предложений - относящихся к материалу: 2
0   Спам
1 BKV   (14.03.2014 00:46)
Аватар BKV Фон зафиксировал, давно хотел но не знал как, спасибо за статью! hands

0   Спам
2 BKV   (14.03.2014 01:03)
Аватар BKV Дикая возможно идея, возможно чтобы фон плавно появлялся? surprised


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]