Background - це властивість, за допомогою якого можна задати фон елемента. Фон може бути кольоровим або навіть містить зображення. У цій статті я розповім про всі можливості цієї властивості і покажу одну хитрість, за допомогою якої фоном одного об'єкта можна зробити відразу кілька зображень.
Будь-яка людина, коли-небудь відкривав підручник по HTML. знає про властивості, які задають фон елемента:
Текст текст текст.
В CSS вони об'єднані в одну загальну властивість - background.
Текст текст текст.
Щоб протестувати цю властивість, "не відходячи від каси", спробуємо застосувати його на простому блоці
Отже, познайомтеся, це ↑ наш
Так вже трохи веселіше, правда? Колір можна задавати різними способами: найменуванням (orange), шестізнаков HEX (# ff8c00) або кодом RGB (255,165,0). До найменувань вдаються рідко, оскільки в різних браузерах різних найменувань іноді відповідають трохи різні кольори. Найчастіше колір позначають шестізнаков.
Всі ці три значення позначають один і той же помаранчевий колір. З кольором розібралися. Тепер ми хочемо додати додати якусь фонове зображення. Наприклад, ось таке:
Головне, щоб орнамент на зображенні рівномірно повторювався. Якщо когось цікавить, можу запропонувати відмінний генератор смугастих фонів. щоб не розраховувати все по пикселам самим.
Тепер наш див не тільки помаранчевий, але ще і смугастий.
"Легкотня! - скажете Ви. - Те ж саме можна було зробити за допомогою bgcolor і background без CSS!"
Вірно. Тому ми розглянемо більш складний випадок, в якому ми не зможемо обійтися одним HTML му. Припустимо, ми хочемо помістити на задній фон ось таку пляму:
Тепер див став плямистим. Ми не хочемо так багато плям. Давайте зробимо так, щоб плями у нас повторювалися тільки по горизонталі.
Або тільки по вертикалі.
А може, краще залишити одне єдине пляма?
Так, одного плями досить, але зліва воно тільки заважає. Давайте краще пересунемо його в центр.
А може, краще в правий нижній кут?
Принцип зрозумілий? Приклади можна продовжувати до нескінченності. Щоб Вам потім не снилися ці помаранчеві прямокутники, з прикладами я закінчу і запишу всі можливі значення свойст background нижче:
background-color: red; - червоний колір найменуванням
background-color: # ff0000; - червоний колір HEX кодом
background-color: rgb (255,0,0); - червоний колір RGB
background-color: transparent; - прозорий колір
background-repeat: repeat; - прокручувати фон по горизонталі і вертикалі
background-repeat: repeat-x; - прокручувати фон тільки по горизонталі
background-repeat: repeat-y; - прокручувати фон тільки по вертикалі
background-repeat: no-repeat; - Чи не прокручувати фон
background-position: 40% 70%; - картинка знаходиться на 40% від лівого краю екрана і на 70% від верхнього краю екрана
background-position: 200px 500px; - картинка знаходиться на 200 пікселів правіше лівого краю екрану і на 500 пікселів нижче верхнього краю екрану
background-position: left top; - лівий верхній кут екрану
background-position: left center; - лівий бік екрану
background-position: left bottom; - лівий нижній кут екрану
background-position: right top; - правий верхній кут екрану
background-position: right center; - правий бік екрану
background-position: right bottom; - правий нижній кут екрану
background-position: center top; - вгорі в центрі
background-position: center center; - самий центр екрану
background-position: center bottom; - внизу в центрі
background-attachment: fixed; - під час прокрутки сторінки фонове зображення стоїть на місці
background-attachment: scroll; - під час прокрутки сторінки фонове зображення їде разом з вмістом
Це всі можливі значення. Тільки, щоб не розписувати їх на безліч рядків, як в нашому варіанті:
Їх для зручності зазвичай утрамбовують в більш компактну версію:
На цьому опис можна закінчити, але перед цим я хочу показати Вам фішку, про яку писала у вступі - про те, як закріпити за одним об'єктом відразу кілька фонових зображень. Попереджаю одразу: працювати це буде не у всіх, поскільки не всі браузери підтримують CSS3. Тому те, що я зараз покажу, можна застосовувати допоміжне, але ні в якому разі не покладатися на це стовідсотково.
Згадаймо останній раз наш помаранчевий прямокутник. До сих пір ми розміщували в ньому або смужки, або плями. А що якщо ми хочемо і те й інше? У CCS3 можна накладати необмежену кількість зображень, просто поділяючи властивості background коми.
Скажімо "до побачення" нашому багатостраждальному диву і тепер розглянемо приклад складніше, де нам потрібно включити кілька різних зображень і рассовать їх по різних сторонах сторінки. Візьмемо наприклад відомий шаблон "Хоббіт" від Arcsin. Відкрийте оригінальну версію шаблону. щоб мати її перед очима. Фон складається з наступних фрагментів:
основний фон
повторюється по горізонаталі і вертикалі