Думаю, немає жодного сайту, де не використовувалася б властивість CSS background. Здавалося б, що може бути простіше цієї якості? Але ні, його можливості набагато ширші за звичайне призначення картинки або кольору як тло сторінки. Щось буде знайомим, а щось, напевно, для багатьох стане новинкою. У будь-якому випадку – досконально знати, як працює background буде корисно.
CSS3 привніс чимало нового у властивість, це і прозорість, і призначення декількох зображень як тло, але про це ми поговоримо нижче, а для початку розглянемо основи якості background.
background-color
Я більш ніж впевнений, ви вже неодноразово робили призначення кольору фону. Зробити це можна використовуючи кілька видів запису: звичайний (використовується назва кольору), шістнадцятковий або RGB-запис. Кожен тип рівнозначний, використовуйте який більше подобається. Я намагаюся використати найкоротший варіант, і для сприйняття простіше і файл стилів трохи менший виходить розміром.
P (background-color: red;) p (background-color: #f00;) p (background-color: #ff0000;) p (background-color: rgb(255, 0, 0;))
У CSS3 впроваджена підтримка прозорості, тому можна її додати до нашого кольору, наприклад так:
P (background-color: rgba(255, 0, 0, 0.5);)
Останньою цифрою встановили прозорість 50%. Можна встановити значення прозорості від 0 (повністю прозоре тло) до 1 (повністю непрозоре).
background-image
Ця властивість теж використовується дуже часто, що дозволяє привласнювати фону зображення. У CSS3 додано можливість присвоювати фону кілька зображень, причому кожне створює своєрідний шар, тому кожне наступне накладається на попереднє. Навіщо це може стати в нагоді? Все досить просто – припустимо, потрібно прикрутити рюшечки у кожному з кутів сайту. За умови більш-менш гумової верстки використовувати одне зображення – не варіант. Тому робимо 4 «шари», кожне зображення рухаємо у свій кут і на цьому все, завдання вирішено
Body (background-image: url("image1"), url("image2"), url("image3"))
Якщо потрібно призначити одне зображення на тлі — у коді залишаємо лише перше, гадаю, це зрозуміло.
Використовуючи будь-які зображення як фон слід пам'ятати два правила:
- задайте контрастний колір фону на той випадок, якщо у користувача з якихось причин не з'явиться зображення. Він може банально вимкнути відображення картинок, заощаджує трафік.
- не використовуйте фонове зображення для передачі будь-якої важливої інформації. Через зазначену вище, користувач може не побачити.
Підтримка кількох зображень для фону є досить широкою. Всі браузери, навіть IE8, підтримують цю властивість.
Від автора:всіх вітаю. Фонові кольори та зображення у веб-дизайні мають величезну роль, оскільки дозволяють привабливіше оформити будь-які елементи. Як зробити фон у html, ми розглянемо сьогодні.
Чи можна обійтись засобами html при заданні фону?
Відразу скажу, що ні. Взагалі, html не створений для того, щоб оформляти веб-сторінки. Це дуже незручно. Наприклад, є атрибут bgcolor, за допомогою якого можна задавати фоновий колір, але це дуже незручно.
Відповідно, ми використовуватимемо каскадні таблиці стилів (css). Там набагато більше можливостей для завдання бекграунду. Ми сьогодні розберемо найголовніші.
Як встановити фон через css?
Отже, перш за все, вам потрібно визначитися з тим, якому елементу потрібно задати фон. Тобто нам потрібно знайти селектор, до якого ми писатимемо правило. Наприклад, якщо фон потрібно задати всій сторінці в цілому, можна зробити це через селектор body, всім блокам - через селектор div. Ну і т.д. Фон можна і потрібно прив'язувати до будь-яких інших селекторів: стильових класів, ідентифікаторів і т.д.
Після того, як ви визначилися з селектором, потрібно написати саму назву властивості. Для завдання фонового кольору (саме суцільного кольору, не градієнта та не картинки) використовується властивість background-color. Після нього потрібно поставити двокрапку і написати сам колір. Це можна зробити по-різному. Наприклад, за допомогою ключових слів, hex-коду, форматів rgb, rgba, hsl. Будь-який спосіб підійде.
Найчастіше використовується спосіб шістнадцяткового коду. Для підбору кольорів можна використовувати програму, де видно код кольору. Наприклад, photoshop, paint або будь-який онлайн-інструмент. Відповідно, для прикладу пропишу спільне тло для всієї веб-сторінки.
body( background-color: #D4E6B3; )
Цей код потрібно вставити в розділ head. Важливо, щоб файли були в одній папці.
Картинка як тло
Як малюнок я використовуватиму маленький значок мови html:
Створимо порожній блок із ідентифікатором:
< div id = "bg" > < / div > |
Задамо йому явні розміри та тло:
#bg( width: 400px; height: 250px; background-image: url(html.png); )
# bg ( width: 400px; height: 250px; background-image: url (html. png); |
З цього коду ви можете бачити, що я використав нову властивість – background-image. Воно призначене якраз для вставки картинки як тло html-елементу. Подивимося, що вийшло:
Щоб задати картинку, ви повинні після двокрапки написати ключове слово url, а потім у круглих дужках вказати шлях до файлу. В даному випадку шлях зазначений виходячи з того, що зображення лежить у тій же папці, що html-документ. Також потрібно вказати формат зображення.
Якщо ви зробили це, а в блоці все одно не відображається фон, перевірте ще раз, чи правильно написали назву картинки, чи правильно заданий шлях і розширення. Це найчастіші причини того, що просто не виводиться фон, тому що браузер не може знайти зображення.
Але чи ви помітили одну особливість? Браузер взяв та розмножив картинку по всьому блоку. Так ось, щоб ви знали, це поведінка фонових картинок за замовчуванням - вони повторюються по вертикалі та горизонталі до тих пір, поки можуть лізти в блок. За цією поведінкою ви можете легко керувати. Для цього використовують властивість background-repeat, у якого є 4 основні значення:
Repeat – значення за промовчанням, зображення повторюється з обох боків;
Repeat-x - повторюється тільки по осі x;
Repeat-y – повторюється лише з осі y;
No-repeat - не повторюється взагалі;
Кожне значення ви можете прописати та подивитися, що ж станеться. Я пропишу так:
background-repeat: repeat-x;
background-repeat: repeat-x; |
Тепер повторення лише по горизонталі. Якщо прописати no-repeat, то була б лише одна картинка.
Відмінно, на цьому вже можна закінчувати, тому що це базові можливості роботи з фоном, але я вам покажу ще 2 властивості, які дозволяють отримати більше можливостей в управлінні.
За допомогою повторення верстальники раніше досягали того, що створювали фонові текстури та градієнти, використовуючи одне малесеньке зображення. Воно могло бути 30 на 10 пікселів або менше. А може, й трохи більше. Зображення було таким, що при його повторенні по одній або навіть по обидва боки, не було видно переходів, тому в результаті виходив єдиний цілісний фон. До речі, такий підхід варто використовувати і зараз, якщо ви хочете використовувати безшовну текстуру на своєму сайті як тло. Градієнт сьогодні вже можна реалізувати методами css3, про це ми ще обов'язково поговоримо.
Позиція тла
За промовчанням фонове зображення, якщо для нього не встановлено повторення, перебуватиме у лівому верхньому куті свого блоку. Але положення можна легко змінити за допомогою властивості background-position.
Задавати його можна по-різному. Один з варіантів, це просто вказати сторони, в яких повинна знаходитися картинка:
background-position: right top;
background-position: right top; |
Тобто по вертикалі все так і залишилося: фонове зображення розташовується зверху, але по горизонталі ми змінили бік на right, тобто праву. Ще один спосіб поставити позицію – у відсотках. Відлік у своїй починається у разі з верхнього лівого кута. 100% – весь блок. Таким чином, щоб помістити картинку по центру, запишемо так:
background-position: 50%; 50%;
background-position: 50% 50%; |
Запам'ятайте одну важливу річ, пов'язану з позиціонуванням – першим параметром завжди вказується позиція по горизонталі, а другим – по вертикалі. Отже, якщо ви бачите значення 80% 20%, можна відразу укласти, що фонове зображення буде сильно зсунуто вправо, але вниз при цьому сильно не піде.
Ну і, нарешті, прописувати позицію можна в пікселях. Все те саме, тільки замість % буде px. У деяких випадках може знадобитися таке позиціонування.
Скорочений запис
Погодьтеся, що код виходить досить громіздким, якщо задавати так, як це робили ми. Виходить, і шлях до картинки потрібно поставити, і повторення, і позицію. Звичайно, повторення і позиція не завжди необхідне, але в будь-якому випадку, правильніше використовувати скорочений запис властивості. Вона виглядає так:
background: #333 url(bg.jpg) no-repeat 50% 50%;
background: #333 url(bg.jpg) no-repeat 50% 50%; |
Тобто насамперед потрібно записувати загальний суцільний фоновий колір, якщо це необхідно. Потім шлях до зображення, повторення та позиція. Якщо якийсь параметр не потрібен, просто опускаємо його. Погодьтеся, так набагато швидше і зручніше, а ще ми суттєво зменшуємо наш код. Взагалі, я раджу записувати скорочено завжди, навіть якщо потрібно вказати лише колір чи картинку.
Керуємо розміром фонової картинки
Наше поточне зображення не дуже підходить для демонстрації наступного трюку, тому я візьму інше. За розмірами вона нехай буде як блок чи більше за нього. Так ось, уявіть, що перед вами стоїть завдання: зробити фонову картинку так, щоб вона заповнювала свій блок не повністю. А картинка, припустимо, навіть більша за розміри блоку.
Як можна вчинити у такому разі? Звичайно, найпростішим і найрозумнішим варіантом буде просто зменшення картинки, але не завжди є можливість це зробити. Допустимо, вона лежить на сервері і в даний момент немає часу та можливості її зменшити. Проблему можна вирішити за допомогою властивості background-size, яку можна назвати відносно новим і яке дозволяє маніпулювати розміром фонового зображення, та й взагалі будь-якого фону.
Отже, моя картинка зараз займає весь простір у блоці, але я задам їй розмір фону:
background-size: 80%; 50%;
background-size: 80% 50%; |
Знову ж таки, першим параметром задається розмір по горизонталі, другим – по вертикалі. Ми бачимо, що все правильно застосовано - фото стало розміром на 80% ширини блоку завширшки і наполовину у висоту. Тут тільки потрібно внести одне уточнення - задаючи розмір у відсотках ви можете вплинути на пропорції картинки. Тож будьте уважні, якщо хочете не порушити пропорції.
Як можна здогадатися, також розмір фону можна вказувати в пікселях. Ще є два ключові слова-значення, які також можна використовувати:
Cover - відбудеться масштабування картинки таким чином, щоб хоча б по одному боці повністю заповнювала блок.
Contain - відмасштабує так, щоб картинка повністю влазила в блок у максимальному своєму розмірі.
Переваги цих значень у цьому, що де вони змінюють пропорції картинки, залишаючи їх колишніми.
Також ви повинні розуміти, що розтягування картинки може призвести до погіршення якості. Можу навести приклад із життя та реальної практики верстальників. Всі знають і розуміють, що при верстці під десктопи потрібно адаптувати сайт під основні ширини моніторів: 1280, 1366, 1920. Якщо ви візьмете фонову картинку розміром, припустимо, 1280 на 200, і не задайте їй background-size, то екранах з шириною більше з'явиться порожнє місце, картинка не заповнюватиме ширину повністю.
У 99% випадків це не влаштовує веб-розробника, тому він задає background-size: cover, щоб зображення завжди тягнулося на максимум по ширині вікна. Це хороший прийом, який потрібно використовувати, але тепер ви зіткнетеся з проблемою, що користувачі з шириною екрана 1920 пікселів можуть побачити зображення неоптимальної якості.
Я нагадаю, що вона розтягнеться на максимум по ширині. Відповідно, якість автоматично погіршиться. Єдино правильним рішенням тут спочатку використовуватиме картинку більшого розміру - 1920 пікселів завширшки. Тоді на найширших екранах вона буде у своєму натуральному розмірі, а на інших просто потихеньку обрізатиметься, але при цьому, при грамотному підборі фонової картинки, на зовнішній вигляд сайту це не вплине.
Загалом, це лише один приклад того, як використовувати знання, отримані вами у цій статті, при верстці реальних макетів.
Напівпрозоре тло за допомогою css
Ще одна фішка, яку можна реалізувати за допомогою CSS – напівпрозоре тло. Тобто через це тло можна буде розглянути, що перебувати за ним.
Для прикладу я поставлю всій сторінці як фон картинку, яку ми використовували раніше в прикладах. Блоку ж із ідентифікатором bg, на якому ми проводимо всі наші експерименти, поставимо фон за допомогою формату завдання кольору rgba.
Як я вже й казав раніше, у css є багато форматів для завдання кольору. Один із них – rgb, досить відомий формат тим, хто працює у графічних редакторах. Він записується так: rgb (17, 255, 34);
Першим значенням у дужках іде насиченість червоного, потім зеленого, потім синього. Значення може бути числовим від 0 до 255. Відповідно формат rgba нічим не відрізняється, тільки додається ще один параметр - альфа-канал. Значення може бути від 0 до 1, де 0 повна прозорість.
коротка інформація
Версії CSS
Значення
url Як значення використовується шлях до графічного файлу, який вказується всередині конструкції url(). Шлях до файлу при цьому можна писати як у лапках (подвійних чи одинарних), так і без них. none Скасує зображення для елемента. inherit Наслідує значення батька.HTML5 CSS2.1 IE Cr Op Sa Fx
Об'єктна модель
document.getElementById("elementID ").style.backgroundImage
Браузери
Internet Explorer до версії 7.0 включно застосовує фон до внутрішньої частини межі елемента, у якого встановлено властивість hasLayout. Якщо елемент не має hasLayout , властивість background-image буде враховувати межі елемента, як це і задано в специфікації. Різниця в відображенні буде помітна, якщо межі пунктирні (dashed або dotted), а не суцільні.
Якщо для елемента значення встановлено як scroll або auto , Internet Explorer 8 буде вертикальна затримка в один піксел при прокручуванні фону.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.
Якщо фон задається для рядка таблиці (тег
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Результат цього прикладу в браузері Chrome показано на рис. 1. Браузер Internet Explorer, Opera та Firefox коректно відображають фон для рядка (мал. 2).
Рис. 1. Повторення фону для кожного осередку
Рис. 2. Фон для всього рядка