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


Властивість 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.

Порада:

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

Синтаксис

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

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

background-color

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

background-image

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

background-position

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

background-size

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

background-repeat

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

background-origin

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

background-clip

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

background-attachment

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

initial

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

inherit

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

unset

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

initial

Значення без задання: transparent || none || repeat || scroll || 0% 0%
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.background="red url(smiley.gif) top left no-repeat"

Переглядачі

Переглядач
одне тло

1.0

4.0

1.0

1.0

3.5

декілька фонів

1.0

9.0

3.6

1.3

10.5

Переглядач
одне тло

2.1

1.0

3.2

декілька фонів

2.1

1.0

3.2


Мобільних переглядачів ще не додано.

Приклади


Динамічна зміна тла сторінки

Демонстрація роботи властивості

Тут ми встановили тло для заголовку першого рівня

Динамічний приклад

Маркер у вигляді стрілки створено на основі тла

Встановлення деяких властивостей backgroung-* в одній декларації.

body { 



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



}

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