Задает в сокращенном виде фон элемента: цвет, URL изображения, повторение, позиционирование изображения
background: #333 url(images/logo.gif) no-repeat fixed left top;
background: url(images/logo.gif) no-repeat center cover;
background: linear-gradient(to top right, #FDB171, #FD987D);
Определяет, как ведет себя фон при прокрутке страницы
scroll - прокручивается вместе с элементом
fixed - не прокручивается совсем
body {
background-attachment: fixed;
}
Ограничивает область, в которой появляется фон
border-box - под границей, отступами и содержимым
padding-box - в области отступов и содержимого
content-box - в области содержимого
div {
background-clip: content-box;
}
Цвет фона элемента, по умолчанию
transparent - по умолчанию
цвет
div {
background-color: #fff;
}
URL изображения
none - по умолчанию
URL
div {
background-image: url(images/photo.jpg);
}
/* image-set плохая поддержка браузеров */
div {
background-image: image-set(
url(images/ilnurgi.png) 1x,
url(images/ilnurgi-2x.png) 2x
);
}
Куда помещать изображение относитльно границ, отступов и содержимого
border-box - верхний левый угол
padding-box - в области отступов
content-box - в области содержимого
div {
background-origin: content-box;
}
Позиционирование фонового изображения
top
center
bottom
left
right
число - по умолчанию, 0 0
div {
background-position: left top;
}
Повторение фонового изображения
repeat - повторяется по горизонтали и по вертикали
repeat-x - повторить по горизонтали
repeat-y - повторить по вертикали
no-repeat - не повторять
div {
background-repeat: no-repeat;
}
Размер фонового изображения
div {
background-size: 200px 400px;
background-size: cover;
}