Фон елемента

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

Фон елемента за замовчанням поширюється на content і padding. На margin фон елемента не поширюється, бо це зовнішній відступ.

Властивість background-color

Властивість background-color визначає колір фону елемента. Колір може бути заданий назвою (наприклад, "red"), hex-кодом (наприклад, #FF0000) або RGB значеннями (наприклад, rgb(255, 0, 0)).

background-color: значення

Властивість background-image

Властивість background-image визначає зображення, яке використовується як фон для елемента. Ця властивість дозволяє встановити одне або кілька фонових зображень для елемента. Можна вказати як відносний, так і абсолютний шлях на фонове зображення у аргументі функції url().

background-image: url('шлях_до_зображення.jpg');

Можна разом із фоновим зображенням задати й фоновий колір. Тоді, якщо з якихось причин не завантажиться зображення, підвантажиться хоча б фоновий колір.

Властивість background-repeat

Властивість background-repeat визначає, як фонове зображення повторюється у випадку, якщо воно менше за розмір елемента. Ця властивість може приймати кілька значень для контролю за тим, чи і як зображення повторюється горизонтально та вертикально.

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round

repeat (за замовчуванням): Зображення повторюється як по горизонталі, так і по вертикалі.

repeat-x: Зображення повторюється тільки горизонтально, а по вертикалі не повторюється.

repeat-y: Зображення повторюється тільки вертикально, а по горизонталі не повторюється.

no-repeat: Зображення не повторюється і відображається лише один раз.

space: Зображення повторюється таким чином, щоб відстані між повторами були рівними, але зображення не виходить за межі елемента.

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

Властивість background-position

Властивість background-position визначає положення фонового зображення відносно елемента, до якого воно застосоване. Властивість background-position може бути використана для визначення горизонтального та вертикального положення фонового зображення.

background-position: горизонталь_позиція_x вертикаль_позиція_y;

Де горизонталь_позиція та вертикаль_позиція можуть бути вказані як відсотки, або ключові слова (left, center, right, top, bottom) або конкретні довжини (наприклад, 10px, 50%). Можна також комбінувати, задавши, наприклад одне зміщення у відсотках, а інше в пікселях тощо.

Якщо зміщення задати в пікселях, то воно враховується від верхнього лівого кута батьківського елемента. Точкою зсуву буде верхній лівий кут фонового зображення.

Позиція зі зміщенням

Позиція фонового зображення зі зміщенням (background-position with offset) - це спосіб вказати точне місце розташування фонового зображення відносно його звичайної позиції на фоні елемента. Це може бути корисно, коли ви хочете змістити фонове зображення на певну відстань від його звичайної позиції.

background-position: X offset_x Y offset_y;

Першим параметром іде ключове слово, а другим зміщення (це відносно осі x). Так само третій і четвертий - відносно осі y.

background-position: right 20px bottom 30px;

Властивість background-size

Властивість background-size визначає розмір фонового зображення. Ця властивість дозволяє контролювати, як фонове зображення масштабується або обрізається, щоб відповідати розміру елемента.

background-size: auto | значення | cover | contain

Розмір можна задати шириною і висотою.

background-size: width height;

width і height можуть бути вказані у пікселях (px), відсотках (%), ключових словах або спеціальних значеннях.

/* Ширина 200px. Висота виразується пропорційно */
background-size: 200px;

/* Ширина 200px. Висота 300px */
background-size: 200px 300px;

/* Ширина 150%. Висота 150% */
background-size: 150% 150%;

Значення contain і cover

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

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

Значення contain:

• Зберігає пропорції зображення.

• Зображенню задаються максимально можливі розміри (не більші за оригінал), за яких воно повністю поміщається в елемент.

• Зображення може не закрити увесь фон елемента за вертикаллю або горизонталлю, якщо пропорції блоку і зображення не збігаються.

Значення cover:

• Зберігає пропорції зображення.

• Зображенню задаються мінімальні розміри, за яких воно заллє фон всього елемента.

• Якщо пропорції зображення і елемента різні, частина зображення, за вертикаллю або горизонталлю, візуально обрізається.

На наступному прикладі для наочності - скасовано повторення зображення і відцентровано. За замовчуванням встановлено значення auto.

Властивість background-attachment

Властивість background-attachment визначає, чи рухається фонове зображення разом з вмістом сторінки чи залишається непорушним при прокручуванні вмісту.

background-attachment: scroll| fixed | inherit

scroll (за замовчуванням): Фонове зображення рухається разом з вмістом сторінки. Якщо вміст прокручується, фонове зображення також прокручується.

fixed: Фонове зображення залишається непорушним і не рухається під час прокручування вмісту. Воно залишається на одному місці на вікні перегляду сторінки.

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

Властивість background є скороченою формою для встановлення всіх фонових властивостей одночасно. Вона дозволяє встановити фоновий колір, фонове зображення, повторення, позицію, розмір та прокладений фоновий градієнт, використовуючи один властивий стиль.

 background: background-color background-image background-repeat background-attachment background-position/background-size;

Якщо якийсь компонент не вказаний, буде взято його значення за замовчуванням.

Скорочену форму буває тяжко сприймати. І новачкам часто радять користуватися окремими властивостями, але цей синтаксис варто знати.

.element {
  background: #f0f0f0 url('background.jpg') repeat-x fixed center center;
}

У цьому прикладі:

• #f0f0f0 - це фоновий колір.

• url('background.jpg') - це фонове зображення.

• repeat-x - зображення повторюється тільки горизонтально.

• fixed - зображення зафіксоване на місці і не рухається при прокручуванні.

• center center - позиція зображення по центру елемента.

Багатошаровий фон

Багатошаровий фон (multilayered background) використовується для створення складних фонових ефектів, використовуючи кілька фонових зображень або градієнтів, які накладаються один на одного. Це дозволяє створювати складніші та цікаві фонові декорації для веб-сайтів та веб-додатків.

Для створення багатошарового фону вказують кілька значень для різних фонових шарів (через кому). Кожне значення являє собою окремий шар, який накладається на попередній. Вище буде те зображення, яке зазначено раніше у переліку

background-image: url('layer1.jpg'), url('layer2.jpg');
background-size: 100px, cover;
background-position: top right, center;
background-repeat: repeat-x, no-repeat;

або у скороченій формі

.element {
  background: 
    url('layer1.jpg') no-repeat center center fixed,
    url('layer2.png') no-repeat top left;
}