background

background

Задает в сокращенном виде фон элемента: цвет, 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);

background-attachment

Определяет, как ведет себя фон при прокрутке страницы

  • scroll - прокручивается вместе с элементом

  • fixed - не прокручивается совсем

body {
    background-attachment: fixed;
}

background-clip

Ограничивает область, в которой появляется фон

  • border-box - под границей, отступами и содержимым

  • padding-box - в области отступов и содержимого

  • content-box - в области содержимого

div {
    background-clip: content-box;
}

background-color

Цвет фона элемента, по умолчанию

  • transparent - по умолчанию

  • цвет

div {
    background-color: #fff;
}

background-image

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
    );
}

background-origin

Куда помещать изображение относитльно границ, отступов и содержимого

  • border-box - верхний левый угол

  • padding-box - в области отступов

  • content-box - в области содержимого

div {
    background-origin: content-box;
}

background-position

Позиционирование фонового изображения

  • top

  • center

  • bottom

  • left

  • right

  • число - по умолчанию, 0 0

div {
    background-position: left top;
}

background-repeat

Повторение фонового изображения

  • repeat - повторяется по горизонтали и по вертикали

  • repeat-x - повторить по горизонтали

  • repeat-y - повторить по вертикали

  • no-repeat - не повторять

div {
    background-repeat: no-repeat;
}

background-size

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

div {
    background-size: 200px 400px;
    background-size: cover;
}