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

Размер фонового изображения

В CSS2.1 размер фонового изображения нельзя было явно установить, в CSS3 Вы можете устанавливать размер фоновых изображений с помощью свойства background-size.

Размер фоновых изображений может быть указан в пикселях или в процентах.

#wrap1 {
background-image:url("spider2.gif");
background-size:150px 250px;
}
#wrap2 {
background-image:url("spider2.gif");
background-size:70% 70%;
}

Несколько фоновых изображений в CSS3

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

#wrap1 {
background-image:url(wislink.gif),url(mountimg3.jpg);
background-position:bottom right, center;
background-size:150px 40px,100% 100%;
background-repeat:no-repeat,no-repeat;
}

Свойство background-origin

С помощью нового CSS3 свойства background-origin Вы можете установить как должно вычисляться положение элемента относительно границ его родительского элемента.

Данное свойство может иметь 3 различных значения:

• border-box положение элемента вычисляется относительно верхнего левого угла границы элемента;
• padding-box положение элемента вычисляется относительно верхнего левого угла блока padding;
• content-box положение элемента вычисляется относительно верхнего левого угла содержимого.

#wrap1 {
background-origin:border-box;
background-image:url("border-box.png");
}
#wrap2 {
background-origin:padding-box;
background-image:url("padding-box.png");
}
#wrap3 {
background-origin:content-box;
background-image:url("content-box.png");
}