CSS3 предоставляет несколько новых свойств для управления фоном элемента, таких как обрезка фона, несколько фонов и возможность настройки размера фона.
В этом разделе описываются все новые функции CSS3. Стандартные свойства для работы с фоном см. в Руководстве по свойству background в CSS.
Свойство background-size
Свойство background-size может быть использовано для указания размера фоновых изображений. До CSS3 размер фоновых изображений определялся фактическим размером изображений. Размер фонового изображения можно указать, используя значения в пикселях или процентах, а также ключевые слова auto, contains и cover. Отрицательные значения не допускаются.
.box {
width: 250px;
height: 150px;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
border: 6px solid #333;
}Свойство background-size обычно используется для создания полноразмерных фоновых изображений, которые масштабируются в соответствии с размером области просмотра или с помощью браузера.
Свойство background-clip
Свойство background-clip можно использовать для указания того, распространяется ли фон элемента за границу или нет. Свойство background-clip может принимать три значения: border-box, padding-box, content-box.
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: orange;
background-clip: content-box;
}О том, как работает блочная модель см. Руководство по блочной модели в CSS.
Свойство background-origin
Свойство background-origin можно использовать для указания области расположения фоновых изображений. Оно может принимать те же значения, что и свойство background-clip: border-box, padding-box, content-box.
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
background-origin: content-box;
}Свойство background-origin игнорируется, если значение свойства background-attachment указано как fixed.
Использование нескольких background-ов
CSS3 дает вам возможность добавить несколько фонов к одному элементу. Фоны наслоены друг на друга. Количество слоев определяется числом значений, разделенных запятыми, в свойстве background-image или background.
.box {
width: 100%;
height: 500px;
background: url("images/birds.png") no-repeat center, url("images/clouds.png") no-repeat center, lightblue;
}Первое значение в списке фонов, разделенных запятыми, то есть background-image birds.png появится сверху, а последнее значение, то есть цвет lightblue, появится внизу. Только последний элемент background может включать background-color.
