Сьогодні, практично в кожному дизайні сайту є красива background картинка.

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

Здавалося б, дрібниця, але все ж таки, часом потрібно створити щось складне простим способом. Наприклад, реалізувати декілька background з індивідуальними параметрами без використання допоміжних div блоків. Тобто зберігаючи .

У цій статті ми розглянемо синтаксис коду, що підтримує декілька background (multiple backgrounds) в одному елементі. Ось, як це виглядає у реалії:

CSS код для multiple backgrounds

Декілька background картинок реалізуються за допомогою кількох значень css параметра background, які розділені комою:

#multipleBGs ( background: url(photo1.png), url(photo2.png), url(photo3.png) ; background-repeat: no-repeat, no-repeat, repeat-y; background-position: 0 0, 30px 70px, right top; width: 400px; height: 400px; border: 1px solid #ccc; )

Я намагався зробити так само за допомогою короткого коду. На жаль, не працює.

Плюс до цього, можна використовувати інші властивості background (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Так само, як і в CSS градієнтах.

От і все! Сподіваюся вам сподобалася ця техніка створення кількох background, без використання будь-яких допоміжних елементів. Чистий семантичний код.

Якщо у вас залишилися питання, зауваження чи пропозиції щодо даної техніки створення multiple backgrounds – пишіть у коментарі. Також, хотілося б провести тест на

Розповідаючи про властивість background-image на початку розділу, ми не згадали про одну особливість: у CSS3 ви можете додавати кілька фонів для одного елемента, просто перераховуючи їх через кому. Особливо це буває потрібно, коли елемент із фоном має непостійну ширину або висоту, і фон повинен підлаштовуватись під його розмір.

Як задати кілька фонів у CSS

Ми продемонструємо вам приклад, який цілком може стати в нагоді на практиці. Уявімо, що нам необхідно помістити блок із текстом у рамку. Рамка є графічним файлом у форматі PNG:

У цьому завдання висота тексту нам невідома - ми знаємо, поміститься текст повністю в рамку чи вийде її межі. Через цю невідому величину ми можемо ризикувати, використовуючи вихідний малюнок рамки як тло. Але за допомогою CSS ми можемо змусити цю рамку подовжуватися за потреби. Для цього доведеться розділити вихідний малюнок у графічному редакторі на три частини – верх, низ та середину – і зберегти кожен файл окремо. Ось так:

Верхня частина рамки

Нижня частина рамки

Середина рамки

Фон із зображенням середини рамки ми зробимо повторюваним по осі Yтоді як верх і низ рами не будуть дублюватися. Додамо всі три фони до елемента, а також запишемо інші необхідні стилі:

Frame ( background-image: url(https://goo.gl/tKyzHt), /* верхня частина рамки */ url(https://goo.gl/SUKymM), /* нижня частина рамки */ url(https: //goo.gl/Km7HVV);/* середина рамки */ background-position: center top; /* позиція верху рамки */ center bottom; -repeat: no-repeat, /* верх рамки не повторюється */ no-repeat, /* низ рамки не повторюється */ repeat-y;/* середина рамки повторюється по вертикалі */ background-size: contain; всіх фонів однакове значення */ height: auto; /* висота блоку залежить від кількості вмісту */ width: 400px; /* ширина блоку фіксована */ padding: 30px;

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

Фонові малюнки розміщуються за принципом шарів – один під одним. Фон, вказаний першим, буде у верхньому шарі, другий фон - під першим, третій - під першими двома. Саме тому ми помістили малюнок із серединою рамки в самий кінець – щоб він не накладався на верхню та нижню частини.

Далі в коді задані властивості background-position і background-repeat для кожного фону (дотримується той самий порядок, в якому розташовані фонові малюнки). Так, ви правильно здогадалися: якщо це потрібно, то через кому можна вказувати значення та інших фонових властивостей. А якщо вам потрібно застосувати одне значення для всіх фонів, ви записуєте його як завжди (у нашому випадку це властивість background-size: contain).

Що ж, погляньмо на результат:

Як бачимо, рамка розташувалася правильно і тепер вона красиво обрамляє вміст блоку. Що ж буде, якщо збільшимо кількість тексту в блоці? Дивимося:

Середня частина нашої рамки продублювалася по вертикалі необхідну кількість разів, наче витягаючись у довжину та підлаштовуючись під текст. Це і є той ефект, який не вдалося б реалізувати, якби ми використовували цілісне зображення рамки. Додамо ще більше тексту для наочності:

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

Використання скороченого запису

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

Background: url(https://goo.gl/tKyzHt) center top / contain no-repeat, /* верх рамки */ url(https://goo.gl/SUKymM) center bottom / contain no-repeat, /* низ рамки */ url(https://goo.gl/Km7HVV) center top / contain repeat-y; /* середина рамки */

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

До одного елемента можна додати відразу кілька фонових зображень через властивість background . Це дозволяє обійтися одним елементом для створення складного фону або однією картинкою, виводячи кілька разів з різними налаштуваннями. Усі зображення зі своїми параметрами перераховуються через кому, причому спочатку вказується картинка яка виводиться поверх інших зображень, а останньої, відповідно, найнижча картинка. У прикладі 1 показано створення фону із трьома зображеннями.

Приклад 1. Три фони

Якщо потрібно окремо задати якусь стильову властивість для фону, як background-size як у прикладі вище, то параметри для кожного фону перераховуються через кому. Результат цього прикладу показано на рис. 1.

Мал. 1. Фон із трьома зображеннями

Окремі зображення для фону дозволяють змінювати їхнє положення, а також анімувати, як показано в прикладі 2.

Приклад 2. Анімований фон

Розглянемо тепер як використовувати одну картинку для створення блоку з рамкою (рис. 2). Ширина блоку фіксована, а висота тягнеться залежно від обсягу вмісту блоку.

Мал. 2. Мальована рамка

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

Мал. 3. Підготовлене для фону зображення

Сам фон виводиться властивістю background, воно ставить і координати потрібного фрагмента. Параметри кожного фону перераховуються через кому і в даному випадку має значення їх порядок. Нам потрібно, щоб верхня та нижня частина блоку не перекривалися, тому ставимо їх першими (приклад 3). Колір тла вказується останнім.

Приклад 3. Декілька фонових картинок

Перший фон виводить верхню межу блоку, другий фон – нижню, а третій – вертикальні межі. Останнім йде колір, що видно у прозорій центральній частині блоку (рис. 4).

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

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

Безліч фонових зображень

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

Blockimg( background: url("img/img2.png"),/*найвищий фон і далі послідовно*/ url("img/img3.png"), url("img/img1.jpg"); background-position :370px center, 120px 150px, center center;/*позиція зображень*/ background-repeat: no-repeat;/*повторення малюнка*/ background-color: #444;/*якщо потрібний колір фону*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; ( background: url("img/img2.png") no-repeat 370px center, url("img/img3.png") no-repeat 120px 150px, url("img/img1.jpg") no-repeat center center margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px;

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

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

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

Фоновий малюнок через псевдоелемент

Також не варто забувати про альтернативні варіанти, як такими є псевдоелементи before і after. У їх застосуванні є позитивний плюс - зображення можна заносити за край елемента, так що воно не зникало на кордоні, а було поверх неї. Такий прийом стане в нагоді, якщо потрібно буде зробити щось на зразок 3Д ефекту.

Blockimg( background: url("img/img1.jpg") no-repeat;/*фон елемента*/ position:relative;/*область позиціонування*/ margin: 200px auto 15px; box-sizing: border-box; padding: 25px; width: 700px; min-height: 300px; ) . left: 0; position: absolute;/*абсолютне позиціонування*/ right: 0; top: -150px;

Пояснення.По суті все дуже просто. Головному елементу звичайним шляхом задаємо тло. Далі йде ключова властивість position: relative; яке визначає область для переміщення іншого елемента, що знаходиться в головному елементі і має властивість position:absolute; .

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

). Сьогодні ми трохи поговоримо про ще одну цікаву можливість використання кількох зображень у фоні.

Композиція фонів

Існує безліч причин, з яких вам взагалі може знадобитися композиція кількох зображень у фоні, серед них найважливіші — це:

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

Можуть бути інші розумні причини:)

Класичний підхід

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

Блок із класом «fishing» усередині «mermaid» виключно для демонстраційних цілей.

Тепер трохи стилів:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing ( height:300px; width:480px; position: relative; ) .sample1 .sea ( background: url(media/sea.png) repeat-x top left; ) .sample1 .mermaid ( background: url(media/mermaid.svg) repeat-x bottom left; ) .sample1 .fish ( background: url(media/fish.svg) no-repeat; : 30px; top: 90px; position: absolute; ) .sample1 .fishing ( background: url(media/fishing.svg) no-repeat top right 10px;

Результат:

У цьому прикладі три вкладені фону і один блок з рибками, розташований поруч із «фоновими» блоками. Теоретично, рибок можна переміщати, наприклад, за допомогою JavaScript або CSS3 Transitions/Animations.

До речі, у цьому прикладі для ".fishing" використовується новий синтаксис для позиціонування фону, також визначений у CSS3:
background: url(media/fishing.svg) no-repeat top right 10px;
На даний момент він підтримується в IE9+ та Opera 11+, але не підтримується у Firefox 10 та Chrome 16. Так що користувачі останніх двох браузів упіймати рибку поки не зможуть.

Множинні фони

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

І відповідні стилі:
.sample2 .sea ( height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); ") no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; )
Для визначення множин зображень необхідно використовувати правило background-image, перераховуючи окремі зображення через кому. Додатковими правилами, також списком, можна задати позиціонування, повтори та інші параметри кожного з зображень. Зверніть увагу на порядок перерахування зображень: шари перераховуються зліва направо від верхнього до нижнього.

Результат повністю збігається:

Одним правилом

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

Стилі:
.sample3 .sea ( height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png");

Картинку з результатом наводити не буду - повірте, вона збігається з двома картинками вище. А ось на стилі зверніть увагу ще раз, особливо на «background-repeat» — згідно зі специфікацією, якщо частина списку в кінці пропущена, то браузер повинен повторити вказаний список необхідну кількість разів, щоб відповідати кількості зображень у списку.

В даному випадку це еквівалентно такому опису:
background-repeat: no-repeat, repeat-x, no-repeat, repeat-x;

Ще коротше

Якщо ви пам'ятаєте CSS 2.1, у ньому визначено можливість описувати фонові зображення у короткій формі. Як щодо множинних зображень? Це також можливо:

Sample4 .sea ( height:300px; width:480px; position: relative; background: url("media/fishing.svg") top right 10px no-repeat, url("media/mermaid.svg") , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x;

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

Динамічні зображення

Якщо композиція статична чи динамічна трохи більше, ніж залежно від розмірів контейнера, тоді множинні фони явно спрощують конструкцію сторінки. А що робити, якщо з окремими елементами композиції потрібно працювати незалежно з JavaScript (переміщати, прокручувати і т.п.)?

До речі, ось приклад із життя — тема з кульбабкою в Яндексі:


Якщо ви залізете в код, ви побачите там приблизно таке:

...

Блоки з класами "b-fluff-bg", "b-fluff__cloud" і "b-fluff__item" містять фонові зображення, що накладаються один на одного. Причому фон з хмарами постійно прокручується, а кульбаби літають екраном.

Чи можна це переписати з використанням множинних фонів? В принципі, так, але за умови 1) підтримки цієї можливості в цільових браузерах та… 2) читайте далі;)

Як додати динаміки множинним фонам? У такій ситуації виявляється зручним, що у внутрішньому поданні браузер розкидає окремі параметри фонових зображень за відповідними правилами. Наприклад, для позиціонування є «background-position», і зрушень досить змінювати лише його. Однак є і плата за використання множинних зображень - у цьому правилі (і будь-якому аналогічному) необхідно перераховувати позицію для всіх фонів, заданих для вашого блоку, і не можна зробити це вибірково.

Щоб додати нашому фону з рибками анімації, можна використовувати такий код:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; function animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0))); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mermaidX = 0; fishY = -10 + (10 * Math.cos (t * 0.091)); fishX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, top left"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
де
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame | 0 / 60 ); )); ))();

І, до речі, анімації можна робити через CSS3 Transitions/Animations, але це тема для окремого обговорення.

Паралакс та інтерактив

Нарешті, подібними маневрами можна легко додати ефекти паралаксу або інтерактивної взаємодії з фоном:

Множинні фонові зображення зручні в подібних сценаріях, оскільки поки що ми говоримо тільки про фон (а не контент), їх використання дозволяє уникнути засмічення html-коду та DOM. Але за все доводиться платити: я не можу звертатися до окремих елементів композиції на ім'я, id, клас або будь-який інший параметр. Про порядок елементів у композиції я повинен явно пам'ятати в коді і на кожну зміну будь-якого параметра будь-якого елемента фактично я повинен склеювати рядок, що описує значення цього параметра для всіх елементів, і оновлювати його для всієї композиції.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, top left";

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

Що там із сумісністю?

Всі сучасні версії популярних браузерів, включаючи IE9+, підтримують численні зображення (можна звірятись, наприклад, з saniuse).

Ви також можете використовувати Modernizr , щоб надавати браузерам, які не підтримують множинні фони, альтернативні рішення. Як написав Chris Coyier у замітці про порядок шарів при використанні множинних фонів, робіть приблизно так:

Multiplebgs body ( /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Якщо вас бентежить використання JS для надання зворотної сумісності, ви можете просто двічі оголосити background, правда, це теж має свої мінуси у вигляді можливого подвійного завантаження ресурсів (це залежить від реалізації обробки CSS в конкретному браузері):

/* multiple bg fallback */ background: #000 url(...) ...; /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ background url(...), url(...), url(...), #000 url(...);

Якщо ви вже почали думати про Windows 8 майте на увазі, що ви можете використовувати множинні фони при розробці metro style додатків, тому що всередині використовується той же движок, що і IE10.

P.s. У тему: не можу не згадати феноменальну статтю про