background-attachment
Управляет способом прикрепления фонового изображения к окну браузера.
По умолчанию, при прокрутке (скроллинге) содержимого веб-страницы фон перемещается вместе с текстом. Cвойство background-attachment позволяет зафиксировать фоновое изображение относительно окна браузера, сделать его неподвижным.
Пример :
body {
background: white url('images/giraffe.gif');
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
Возможные значения:
scroll
Фоновое изображение подвижно (прокручивается вместе с содержимым страницы).
fixed
Фиксирует фоновое изображение.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики:
Значение по умолчанию: scroll
Применяется: Ко всем элементам
Наследуется: Нет
См. также:
-
background
-
background-color
-
background-image
-
background-repeat
-
background-position
background-repeat
Свойство background-repeat управляет способом "размножения" - циклического повторения фонового изображения.
Пример :
body {
background: white url('/images/supersonic.gif');
background-repeat: repeat-x;
}
Возможные значения:
repeat-x
Размножает изображение только по вертикали.
repeat-y
Размножает изображение только по горизонтали.
repeat
Размножает изображение в обоих направлениях - и по горизонтали и по вертикали.
no-repeat
Не размножает изображение.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: repeat
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
background
-
background-color
-
background-image
-
background-attachment
-
background-position
Обзор свойств CSS.Фон.
Фон
background
Сокращенный вариант записи для свойств background-color, background-image, background-repeat, background-attachment и background-position.
background-attachment
Устанавливает, должна ли фоновая картинка скролиться или должна быть зафиксирована в окне браузера.
background-color
Устанавливает цвет фона для элемента.
background-image
Устанавливает фоновую картинку для элемента.
background-position
Устанавливает первоначальное положение для фоновой картинки.
background-repeat
Управляет циклическим повторением фоновой картинки.
background-color
Свойство background-color устанавливает цвет фона элемента.Цвет применяется ко всему фону содержимого элемента, и распространяется на его внутренние отступы (paddings). Внешние поля (margins) остаются прозрачными.
Пример :
В данном примере установим желтый цвет фона для элемента заголовка h1.
h1 {
background-color: yellow;
color: black;
border: 3px solid green;
}
Возможные значения:
цвет
Можно напрямую указать цвет фона одним из стандартных способов.
transparent
Устанавливает прозрачный фон.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: transparent
Применяется: К большинству элементов
Наследуется: Нет
См. также.
-
background
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
color
background-image
Свойство background-image устанавливает фоновое изображение для элемента.
Пример параграфа с фоновой картинкой (отображается циклически за текстом):
Пример :
p {
background-color: white;
color: black;
background-image: url('/images/pushkin.gif');
}
Правила хорошего тона.
Хороший тон - всегда задавать свойство background-image в паре с background-color - пригодится в случае, если фоновая картинка по каким-либо причинам не загрузилась. Цвет фона всегда располагается под фоновым изображением.
Возможные значения:
url('...файл...')
Ссылка на картинку - адрес (URL) изображения, заданный стандартным способом.
none
Фоновое изображение не требуется.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: none
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
background
-
background-color
-
background-repeat
-
background-attachment
-
background-position
background-position
Свойство background-position устанавливает местоположение фоновой картинки. При этом свойству обычно присваивается пара значений - для определения горизонтального и вертикального положений. Например:
body {
background-position: 30% 45%;
background-image: url('images/back.gif');
background-repeat: no-repeat;
}
В данном случае картинка будет расположена на расстоянии 30% слева по горизонтали и 45% сверху по вертикали.Вообще, если указана пара значений, то первое обычно применяется к горизонтальному положению, второе - к вертикальному.Если дано только одно значение, то оно применяется к горизонтальному положению, при этом вертикальное будет равно 50% (посередине).При указании значений, кроме процентов можно использовать ключевые слова, принятые в CSS меры длины и их комбинации.
Пример :
a.elink {
background-image: url('images/elink.gif');
background-repeat: no-repeat;
background-position: right 4px;
}
Местоположение фоновой картинки отсчитывается от внутренней стороны рамки (border) элемента.
Пример:
a.external {
padding-right: 16px;
background-image: url('images/arrow.gif');
background-repeat: no-repeat;
background-position: right;
}
Возможные значения:
процент% процент%
Первое значение определяет положение по горизонтали, второе - по вертикали. Например, 0% 0% - верхний левый угол. 100% 100% - правый нижний.
процент%
Горизонтальное положение картинки в процентах от 0% до 100%. Вертикальное значение будет равным 50% (=посередине).
расстояние расстояние
Указывает местоположение (по горизонтали и вертикали соответственно) с использованием принятых в CSS способов задания размеров.
расстояние
Горизонтальное положение картинки, указанное одним из принятых в CSS способов задания размеров. Вертикальное значение будет равным 50% (=посередине).
left top
Верхний левый угол - то же самое, что 0% 0% или top left.
top
Посередине, наверху. То же самое, что и 50% 0%, top center, center top.
right top
Верхний правый угол. То же самое, что и 100% 0%, top right.
left
Слева, посередине. То же самое, что и 0% 50%, left center, center left.
center
В центре. То же самое, что и 50% 50%, center center.
right
Справа, посередине. То же, что и 100% 50%, right center, center right.
left bottom
Левый нижний угол. То же самое, что и 0% 100%, bottom left.
bottom
Посередине, внизу. То же, что и 50% 100%, center bottom, bottom center.
right bottom
Правый нижний угол. То же самое, что и 100% 100%, bottom right.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: 0% 0%
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
background
-
background-color
-
background-image
-
background-repeat
-
background-attachment
background
Свойство background позволяет задать стиль фона, определив в одной строке сразу несколько атрибутов: цвет фона, фоновую картинку, её положение.
По сути, background - сокращённое свойство, краткий вариант записи для свойств background-color, background-image, background-repeat, background-attachment и background-position.
Значения разделяются пробелом и могут располагаться в любом порядке.
Пример:
body {background: white url('/images/sun.gif') repeat fixed top center}
Эквивалентно:
body {
background-color: white;
background-image: url('/images/sun.gif');
background-repeat: repeat;
background-attachment: fixed;
background-position: top center;
}
Возможные значения:
Может принимать значения как у свойств background-color, background-image, background-repeat, background-attachment и/или background-position.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики:
Применяется: Ко всем элементам
Наследуется: Нет
См. также:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position