СSS3 Backgrounds

В СSS3 появилось несколько новых свойств background, которые позволяют лучше контролировать цвет фона HTML:

• background-size;
• background-origin;
• background-clip.

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает то или иное свойство. Числа с -webkit-, -moz- или -O- указывают первую версию, которая поддерживает с префиксом:

CSS3 множественные фоны

CSS3 позволяет добавить несколько фоновых изображений для одного элемента через свойство background-image. Они разделяются запятыми и накладываются друг на друга. При этом первое изображение находится ближе всего к пользователю.

В следующем примере первое - изображение цветка (выравнивается по нижнему правому краю), а второе - представляет собой фон (выравнивается по верхнему левому углу):

Пример:

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

Посмотреть демо

Можно задать несколько фоновых изображений с помощью отдельных свойств фона (как показано выше) или сокращённого свойства background.

В следующем примере используется сокращённое свойство background (результат такой же, как в примере выше):

Пример:

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Посмотреть демо

CSS3 размер фона

Перед тем, как сделать цвет фона в HTML, нужно понимать, что в CSS3 свойство background-size позволяет указать размер фоновых изображений. До этого использовался фактический размер изображения. CSS3 позволяет повторно использовать фоновые изображения в различных контекстах.

Размер может быть указан в единицах длины, процентах или с помощью одного из двух значений: contain или cover.

Следующий пример уменьшает фоновое изображение по сравнению с исходным изображением (с использованием пикселей):

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

Посмотреть демо

Значение contain задает изображению максимально возможные размеры (но по ширине и высоте оно должно помещается в границы фона). Таким образом, в зависимости от пропорций изображения и области блока, могут быть участки фона, которые не закрываются фоновым изображением.

Значение cover задает изображению или HTML цвет фону страницы минимально возможные размеры, при которых оно закроет всю фоновую область блока (ширина и высота равны или превышают область содержимого). Таким образом, некоторые части изображения могут быть не видны за пределами блока.

Следующий пример иллюстрирует использование contain и cover:

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Посмотреть демо

Определение размеров множественных фоновых изображений

Свойство background-size также принимает несколько значений для размера фона (использует список значений, разделенных запятыми) при работе с несколькими изображениями.

Следующий пример определяет три фоновых изображения с разным значением размера фона для каждого изображения:

#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}

Посмотреть демо

Полный размер фонового изображения

Как задать цвет фона в HTML или изображение, которое охватывает все окно браузера.

Требования заключаются в следующем:

• Заполнить всю страницу изображением (без пробелов);
• Масштабировать изображение по мере необходимости;
• Центрировать изображение на странице;
• Не вызывать скроллбары.

В следующем примере показано, как это сделать. Используйте HTML-элемент (всегда подстраивается под высоту окна браузера). Затем установите в нем фиксированный и центрированный фон, и его размер с помощью свойства background-size:

html {
    background: url(img_flower.jpg) no-repeat center fixed; 
    background-size: cover;
}

Посмотреть демо

CSS3 свойство background-origin

В CSS3 свойство background-origin определяет расположение и размеры области отображения фонового изображения или HTML цвета фона страницы.

Свойство принимает три различных значения:

• border-box - фоновое изображение начинается с верхнего левого угла границы;
• padding-box - (по умолчанию) фоновое изображение начинается с верхнего левого угла внутреннего отступа;
• content-box - фоновое изображение начинается с верхнего левого угла содержимого.

Следующий пример иллюстрирует свойство background-origin:

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}

Посмотреть демо

CSS3 background-clip

CSS3 свойство background-clip управляет тем, как HTML цвет фона текста или фоновое изображение выводится относительно границ.

Оно принимает три различных значения:

• border-box - (по умолчанию) фоновое изображение не обрезается.
• padding-box - обрежет фон по внутреннему краю области рамки.
• content-box - обрежет фон по краю области содержимого.

Следующий пример иллюстрирует свойство background-clip:

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

Посмотреть демо

CSS3 свойства фона