Свойство background-size для определения размера фонового изображения.
background-image: url('images/pattern03invert.gif');
До CSS3 фоновое изображение жестко лимитировалось реальным размером изображения.
CSS3 дает более гибкие возможности дизайнерам.
background-image: url('images/pattern03invert.gif');
background-size:40px 20px;
Теперь можно указывать размеры (ширину и высоту) изображения в пикселях или процентах.
Например, если мы укажем ширину 40px, а высоту 20px, то мы растянем изображение в ширину в два раза больше, чем в высоту.
background-image: url('images/pattern03invert.gif');
background-size:100% 100%;
Можно указать размер в процентах.
В этом случае проценты расчитываются исходя из ширины и высоты родительского элемента.
В нашем примере мы указали 100% и для ширины, и для высоты. В результате фоновый рисунок растянулся на полную ширину и высоту родительского дива.
Свойство background-origin для определения места фонового изображения в блоке.
border-box (область границ)
padding-box (область отступов паддингов)
content-box (область контента)
padding-box (область отступов паддингов)
border-box (область границ)
Фоновое изображение может быть размещено:
- content-box - область контента
- padding-box - область отступов паддингов
- border-box - область границ
Новые возможности позволяют дизайнеру более гибко манипулировать с фоновыми изображениями.
Рассмотрим несколько примеров использования свойства background-origin
background-origin:content-box;
В данном случае фоновое изображение располагается в области контента.
background-origin:padding-box;
В следующем примере фоновое изображение располагается в области отсупов паддингов.
На примере видно, что фоновое изображение прижимается ближе к границе.
background-origin: border-box;
В следующем примере фоновое изображение располагается в области границы.
На примере видно, что фоновое изображение частично находится в области границы.
Свойство background-clip определяет используемую область фонового изображения.
Фоновое изображение может быть размещено:
- content-box - область контента
- padding-box - область отступов паддингов
- border-box - область границ
background-clip: content-box;
background-repeat:no-repeat;
background-clip: padding-box;
background-repeat:no-repeat;
background-clip: border-box;
background-repeat:no-repeat;
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;
CSS3 позволяет использовать несколько фоновых изображений для одного блочного элемента.
background-image:url('images/pattern01.gif'),url('images/pattern02.gif');
background-repeat:no-repeat;
background-image:url('images/pattern01.gif'),url('images/pattern2.gif');
background-image:url('images/pattern01.gif'),url('images/pattern2.gif');
background-image:url('images/pattern01.gif'),url('images/pattern2.gif');
Девушки-соккеры
Это чуть более сложный пример для фонов с несколькими файлами. Используются следующие свойства:
.sidebarL_css_047 {
float:left;
background: 32px 630px no-repeat url('images/ball_110.png'), #333355 -30px 0px no-repeat url('images/girl_left.jpg');
}
.sidebarR_css_047 {
float:right;
background: 20px -5px no-repeat url('images/ball_110.png'), #333355 -20px 0px no-repeat url('images/girl_right.jpg');
}
