CSS/Фон: различия между версиями
Oleg4280 (обсуждение | вклад) Нет описания правки |
Oleg4280 (обсуждение | вклад) Нет описания правки |
||
Строка 51: | Строка 51: | ||
body { |
body { |
||
background-color: #8cf; |
background-color: #8cf; |
||
background-image: url(sea.jpg); |
background-image: url('sea.jpg'); |
||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||
background-attachment: fixed; |
background-attachment: fixed; |
||
Строка 66: | Строка 66: | ||
body { |
body { |
||
background: #8cf url(sea.jpg) no-repeat fixed bottom; |
background: #8cf url('sea.jpg') no-repeat fixed bottom; |
||
} |
} |
||
</source> |
</source> |
Версия от 13:39, 22 мая 2014
Свойства, которые устанавливают фон элемента:
background
Это универсальное свойство, которое задаёт параметры фона элемента. Можно указывать через пробел в любой последовательности необходимые свойства.
background-attachment
Это свойство определяет, прокручивается ли фон со страницей (scroll) (значение по умолчанию) либо он зафиксирован (fixed).
background-color
Устанавливает цвет фона, который будет виден, если не задано фоновое изображение.
background-image
Определяет изображение, которое будет использоваться в качестве фона.
background-position
Начальное положение изображения, которое задаётся по горизонтали и вертикали. В качестве значений используются ключевые слова (top, bottom, center, left, right) либо другие единицы.
background-repeat
Способ повторения изображения.
Возможные значения:
- no-repeat — без повторения;
- repeat — с повторением; (значение по умолчанию)
- repeat-x — с повторением только по горизонтали;
- repeat-y — только по вертикали.
Ещё есть пара нестандартных свойств background-position-x
и background-position-y
, которые задают соответственно положение фонового изображения по горизонтали и вертикали.
В CSS3 также появились три новых свойства: background-clip
, background-origin
и background-size
.
Свойство background-clip
определяет область рисования фоновых изображений, а background-origin
— область позиционирования.
Свойство background-size
изменяет масштаб фонового изображения.
Примеры:
Подробная форма записи:
p {
background-color: #ccc;
}
body {
background-color: #8cf;
background-image: url('sea.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}
Сокращённая форма записи:
p {
background-color: #ccc;
}
body {
background: #8cf url('sea.jpg') no-repeat fixed bottom;
}