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: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit|unset;

background-color

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

background-image

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

background-position

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

background-size

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

background-repeat

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

background-origin

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

background-clip

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

background-attachment

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

initial

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

inherit

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

unset

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

initial

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4
• Приклад 5
• Приклад 6

body { 



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



}

Додаткові посилання