Фиксация изображения на месте background-attachment

background-attachment — позволяет фиксировать фоновое изображение при прокрутке страницы.

Это свойство не наследуется.

Background-attachment

scroll Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. fixed Предотвращает перемещение, фиксирует изображение на заднем плане. local Фоновое изображение прокручивается вместе с содержимым элемента. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-attachment: fixed;

}

Заполнение фоном отступов и границ элемента background-clip

background-clip — определяет, будет ли цвет фона ограничиваться содержимым элемента или будет простираться до внешнего края границы border.

Это свойство не наследуется.

Background-clip

border-box Фон растягивается до внешнего края границы элемента. Значение по умолчанию. padding-box Фон простирается до внешнего края отступов элемента. content-box Фон окрашивает только содержимое элемента. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-clip: border-box;

}

Положение изображения относительно его родительского блока

background-origin — свойство определяет, где будет позиционироваться фоновое изображение. Если одновременно задано свойство background-attachment: fixed, эффекта не будет.

Background-origin

padding-box Положение элемента вычисляется относительно верхнего левого угла с внутренней стороны границы элемента. border-box Положение элемента вычисляется относительно верхнего левого угла с внешней стороны границы элемента. content-box Положение элемента вычисляется относительно верхнего левого угла содержимого. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-origin: padding-box;

}

Размер изображения background-size

background-size — позволяет масштабировать фоновое изображение по вертикали и горизонтали.

Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте.

Background-size

auto Высота и ширина изображения равны его оригинальным размерам. px / em / rem Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em. % Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном. cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. contain Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Как пишется в коде:

div {

background-size: 300px 150px;

}

Задание фона элемента одним свойством background

background — позволяет описать в одном объявлении следующие свойства: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip и background-attachment. Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.

Если вы указываете в краткой записи фона свойство background-size, то его значения нужно будет записать через слеш /, чтобы отделить его от свойства background-position.

Как пишется в коде:

body {

background: #00ff00 url("smiley.gif") no-repeat fixed center;

}

Множественные фоны

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

Как пишется в коде:

div {

background-image: url(../rose.png), url(../love.png), url(../white.png);

background-repeat: no-repeat;

background-position: bottom right, center center, top left;

}

Изображения нужно перечислять в порядке наложения, самое верхнее изображение должно быть первым, а самое большое, расположенное на заднем плане — последним.