css властивість background

Властивість background задає колір тла, або його зображення.

Це універсальна властивість для всіх background властивостей, котра в собі дозволяє задавати значення декількох CSS-властивостей, а саме:

• background-color

• background-image

• background-position

• background-size

• background-repeat

• background-origin

• background-clip

• background-attachment

Працюють будь-які комбінації значень, всі комбінації розділяються між собою прогалиною. Значення можуть йти в довільному порядку, браузер сам визначить, яке з них за що відповідає. Пропущені властивості отримують значення без задання (initial). Жодне значення не є обов'язковим, тому значення, що не використовуються можна не вказувати.

Використовуючи одночасно background-position й background-size потрібно розділити їх за допомогою символу слеш - / .

Використовуй цю властивість, щоб пришвидшити завантаження сторінки, адже такий код

    background: url(sweettexture.jpg) top center / 200px 200px no-repeat fixed padding-box content-box red;

Буде завантажуватися швидше, ніж ось такий

    background: url(sweettexture.jpg);

    background-position: top center;

    background-size: 200px 200px;    

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-origin: padding-box;

    background-clip: content-box;

    background-color: red;

Єдиний недолік - це читабельність, адже перший варіант хоч і коротший, але складніший для сприйняття, але ніщо тобі не заважає використовувати коментарі.

    background:

         url(sweettexture.jpg)    /* image */

         top center / 200px 200px /* position / size */

         no-repeat                /* repeat */

         fixed                    /* attachment */

         padding-box              /* origin */

         content-box              /* clip */

         red;                     /* color */

В CSS3 з'явилася підтримка багатошарового тла, де кожен шар знаходяться один над одним (як в фоторедакторі). Відповідно будь-яка властивість, пов'язана з тлом, може приймати список значень, розділений комами, наприклад:

body {

    background: url(tlo1.jpg), url(tlo2.jpg) black;

    background-repeat: repeat-x, no-repeat;

}

Кожне значення з переліку відповідає шару:

1. перше значенням - це перший (верхній) шар;

2. друге значення - другий (середній) шар;

3. третє значення - останній (найнижчий) шар. В нашому випадку це колір тла;

правити

Порада

Якщо використовувати background-image разом з background-color, то у випадку помилки, наприклад, не завантажилася картинка, для тла застосується значення кольору. Єдина умова такої роботи - background-image має перебувати після background-color.

автор: NagarD правити

Порада

Властивість background можна використовувати як зображення замість тегу <img>

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit|unset;

Властивість background може отримувати 11 значень:

background-color

Задає колір тла

автор: NagarD

правити

background-image

Задає одине, або кілька зображень як тло.

автор: NagarD

правити

background-position

Вказує положення зображення, що буде тлом

автор: NagarD

правити

background-size

Вказує розмір фонових зображень

автор: NagarD

правити

background-repeat

Визначає, як повторювати фонові зображення

автор: NagarD

правити

background-origin

Визначає область позиціонування фонових зображень

автор: NagarD

правити

background-clip

Визначає, як колір тла або фонова картинка повинна виводитися під границями

автор: NagarD

правити

background-attachment

Вказує, чи повинно фіксуватися або прокручуватися фонове зображення з іншою частиною сторінки

автор: NagarD

правити

initial

Встановлює властивість у значення без задання

автор: NagarD

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: NagarD

правити

unset

Працює як inherit, але якщо значення не задане - властивості буде задано значення -

initial

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
одне тло	1.0	1.0	1.0	3.5	4.0
декілька фонів	1.0	3.6	1.3	10.5	9.0

Підтримка: мобільні переглядачі

Переглядач
одне тло	2.1	1.0	3.2
декілька фонів	2.1	1.0	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="banner">
    <p>Колір + картинка + no-repeat + fixed + center — одним рядком.</p>
</div>

.banner {
    height: 160px;
    background: #00ff00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='40'%3E%3Ccircle cx='20' cy='20' r='18' fill='gold'/%3E%3Ccircle cx='14' cy='15' r='3'/%3E%3Ccircle cx='26' cy='15' r='3'/%3E%3Cpath d='M12 26q8 6 16 0' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat fixed center;
}