Кроме основных свойств работы с фоном, в CSS3 есть ряд новых возможностей.
Cвойство background-size задает размеры фонового изображения. Значения:
300px auto — первый — это ширина фонового изображения, второй — высота;
contain — изображение полностью помещается в границы фона, но может не закрывать весь фон;
cover — изображение закроет всю фоновую область, но часть изображения может обрезаться;
Свойство background-origin задает расположение и размеры области отображения фонового изображения. Значения:
content-box — область фона = области содержимого, фон НЕ вылазит на отступы и НЕ вылазит на рамки;
padding-box — область фона = области содержимого + отступы, но фон НЕ вылазит на рамки (по умолчанию);
border-box — область фона = размеру блока + отступы + рамки.
Свойство background-clip управляет тем, как обрезается фон. Значения:
content-box — фон обрезается по содержимому (по отступы и рамки);
padding-box — фон обрезается по содержимому + оступы (до рамок);
border-box — фон не обрезается (по умолчанию).
Множественный фон можно задать через:
background:
url("image-1.png") no-repeat left top #ffffff,
url("image-2.png") no-repeat left top #ffffff;
background-image: url("image-1.png"), url("image-2.png");
background-position: left top, left top;
Изображение, которое находится выше в списке, будет расположено выше.
Расположение фона можно задавать относительно любого угла:
background-position: left 50px top 100px; /* слева 50px, сверху 100px */
Повторение фона можно настроить так, что бы фоновое изображение при этом не обрезалось, а масштабировалось или добавлялось пустое пространство.
Свойство background-repeat может принимать значение:
round — фон повторяется так, чтобы в области поместилосьцелое число рисунков; если это не удается сделать, то фоновые рисунки масштабируются;
space — фон повторяется столько раз, чтобы полностьюзаполнить область; если это не удается, между картинкамидобавляется пустое пространство.
background-repeat: round;