CSS3 содержит несколько новых свойств фона, которые позволяют лучше контролировать фон элемента.
Вы также узнаете, как использовать несколько изображений для фона.
Firefox 3.6 и более ранние версии не поддерживают свойство background-origin, и требуют префикса -moz- для поддержки свойства background-size.
Safari 4 требует префикс -webkit- для поддержки новых свойств фона.
Internet Explorer 9, Firefox 4, Chrome, Safari 5 и Opera поддерживают новые свойства фона.
Свойство CSS3 background-size
Свойство background-size определяет размер фонового изображения.
До
CSS3, размер фонового изображения определялся как реальный размер
изображения. В CSS3 можно задать размер фонового изображения, что
позволяет повторно использовать фоновые изображения в различных
контекстах.
Вы можете указать размер в пикселях или в процентах.
Если вы указываете размер в процентах, размер относится к ширине и
высоте родительского элемента.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(/images/bouquet1.jpg);
background-size:150px 150px;
-moz-background-size:150px 150px; /* Firefox 3.6 */
background-repeat:no-repeat;
padding-top:150px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Original image: <img src="/images/bouquet1.jpg" alt="Flowers" width="300" height="300" /></p>
</body>
</html>
Свойство background-origin указывает область позиционирования фоновых изображений.
Фоновое изображение можно поместить в окне контента, обивке, или границы окна области.