1. Color, background-color і background-image
2. Background-repeat - повтор фонової картинки
3. Background-position - позиціонування фону
4. Background-attachment і збірне CSS правило

Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Сьогодні ми розглянемо п'ять CSS правил, які дозволяють задати фон для будь-якого елемента в Html - background-position (image, repeat, color, attachment). Ну, і про складене правило Background теж не забудемо згадати.

Нічого складно в цьому немає, але є певні тонкощі і нюанси, які необхідно знати і враховувати при верстці або правці вже готового шаблону (пам'ятаєте про Фаербаг , Який допоможе відкрити всі таємниці будь-якого дизайну).

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

Color, background-color і background-image

Давайте спочатку подивимося, як задається колір Html елементів за допомогою Css правила color. Насправді тут все просто. Синтаксис абсолютно звичайний і колір ви можете задавати відповідно до того, як це робили в мові гіпертекстової розмітки. Як ви пам'ятаєте, кольори можна задавати за допомогою шести цифр коду , Поставлених після знака решітки (хешу - «# fe35a3»), або за допомогою трьох цифр, якщо перша збігається зі значенням другої, третя з четвертою, ну, а п'ята, відповідно, з шостої (код кольору «# aa33ff» можна коротко записати як «a3f»).

Так само кольору в Html і Css коді можна буде представляти в вигляді слів (наприклад, «red»), але частіше за все використовується саме шістнадцятковий код:

color: # 303

Для прикладу я пофарбував цей маленький абзац в той колір, який наведено вище (# 303). Тепер він злегка відрізняється від кольору решти абзаців (темніший), який заданий як # 555 в файлі CSS використовуваної мною теми WordPress. Але завдання кольору через color це досить просто, а от з фоном буде трохи складніше.

Отже, за фон в Css відповідають п'ять правил, які при бажанні можуть бути об'єднані в одне збірне. Щоб їх побачити, можете перейти на сторінку поточної специфікації консорціуму W3C і пошукати там що-небудь зі словом Background:

1. background color - за допомогою цього правила задається колір фону для будь-якого Html елемента. У ньому можна використовувати або код, або назву відтінку, тобто все в точності так, як і було при використанні color.

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

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

3. background repeat - можна задати повторення картинки фону або тільки по горизонталі в один ряд, або тільки по вертикалі, або взагалі заборонити її повторення.
4. background position - дозволяє точно задати позицію цього зображення як у відсотках, так і в абсолютних величинах
5. background attachment - дозволяє вибрати тип прив'язки точки відліку при позиціонуванні зображення для фону: або щодо конкретного Html елемента, або щодо області перегляду (видимої на екрані комп'ютера області веб сторінки).

Почнемо з правила background-color - воно дозволяє задати колір фону для будь-якого Html елемента, якому це правило буде адресовано за допомогою селектор в файлі стилів (ну, або в якому воно може бути прописано за допомогою атрибута Style ).

Якщо ви заглянете в специфікацію, то побачите, що за замовчуванням колір фону в будь-якому елементі буде прозорий (значення за замовчуванням правила «background-color: transparent»). Правда, в елементах форм (select, input) він за замовчуванням буде не прозорим, тому що це системні елементи і у них все по іншому і відрізняється від звичайних тегів мови гіпертекстової розмітки.

Колір в background-color задається стандартно (шість або три цифри шістнадцятирічного коду, або слово):

background-color: #FEFCDE

Наприклад, фон цього абзацу заданий саме через background-color з наведеним трохи вище кодом кольору.

Всі інші чотири CSS правила стосуватимуться тільки фонової картинки, яку можна задати для будь-якого Html елемента і, при бажанні, точно її позиціонувати. Який саме графічний файл буде використовуватися, можна задати за допомогою background-image.

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

background-image: url (https://ktonanovenkogo.ru/image/comment_top_focus.gif);

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

Тобто при використанні тільки одного правила background-image із зазначенням шляху до графічного файлу, це саме зображення буде розмножено як по вертикалі, так і по горизонталі до тих пір, поки не покриє собою всю область відведену на веб сторінці під даний конкретний Html елемент (в нашому прикладі це був абзац). Чому так відбувається?

Background-repeat - повтор фонової картинки

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

Отже, за допомогою background-repeat ми зможемо управляти повтореннями фонової картинки. У цього правила може бути тільки чотири значення:

1. repeat - задає повтор картинки як по осі абсцис (вісь X, якщо ще не забули шкільний курс алгебри), так і по осі ординат (вісь Y). Використовується за замовчуванням і вказувати його спеціально в правилі не потрібно
2. repeat-x - вона буде повторюватися тільки по горизонталі і вийде в результаті тільки один рядок з повторами. Не забудьте, що правило background-repeat не працюватиме, якщо ви не задали в background-image шлях до фонової картинки: background-image: url (https://ktonanovenkogo.ru/image/rss_no_drop1.png); background-repeat: repeat-x;
3. repeat-y - буде повторюватися тільки по вертикалі (вийде один стовпець з повторів):
   
4. no-repeat - взагалі не буде повторюватися і ми отримаємо одне єдине зображення в лівому верхньому кутку області того Html елемента, для якого воно використовується:
   

Background-position - позиціонування фону

Тепер виникає питання, а чи можна фонову картинку відсунути від лівого верхнього кута області обмежує розмір елемента. Звичайно ж, можна, і для цієї мети служить окреме правило background-position:

Подивившись на специфікацію CSS стає ясно, чому фонова картинка за замовчуванням притискається саме до верхнього лівого краю області Html елемента. Тому що значення «0% 0%» є умолчательную для правила background position.

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

Так само з специфікації видно, що для позиціонування зображення фону за допомогою background-position можна використовувати як відносні (відсотки), так і абсолютні величини (наприклад, пікселі або інші одиниці розмірів застосовні в CSS ). Ну, а так само можна використовувати слова, які будуть відповідати певним цифровим значенням. Але про все по порядку.

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

Тобто браузер буде розраховувати задані відступи по осях X і Y від початку координат області, в якій позиціонується об'єкт, до початку координат цього самого зображення. Наприклад, в цьому абзаці я позиціонував фонове зображення через background position за допомогою наступних CSS правил:

background-image: url (https://ktonanovenkogo.ru/image/logo.png); background-repeat: no-repeat; background-position: 400px 25px;

Тобто значок лічильника Лівінтернет відстоїть на 400 пікселів по горизонталі від лівого краю абзацу та на 25 пікселів по вертикалі вниз від його верхнього краю.

Позиціонування фонової картинки за допомогою background-position в процентах дещо відрізняється від описаного вище:

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

Позиція цієї точки на ній тепер теж визначається тим співвідношенням, яке задано в CSS правилі background-position (в нашому прикладі це 60 відсотків від лівого боку і 40 відсотків від верхнього краю):

Відсотки дуже зручні для позиціонування, наприклад, по центру (50% по осях X і Y) або правому краю (100% по осі X). Адже розміри області елемента можуть змінюватися в залежності від ширини області перегляду, а при використанні відсотків буде змінюватися і положення фонового зображення, щоб завжди перебувати або по центру, або по правому краю. Зробити це за допомогою абсолютних одиниць у вас не вийде.

Можна використовувати так само в background-position і комбінацію абсолютних і відносних одиниць, як наприклад, тут:

Наприклад, якщо вам потрібно буде притиснути картинку фону до правого краю абзацу, а зверху поставити фіксований відступ, то цілком підійде таке CSS правило (приклад дивіться в цьому ж абзаці):

background-image: url (https://ktonanovenkogo.ru/image/logo.png); background-repeat: no-repeat; background-position: 100% 25px;

Т.ч. здійснилося вирівнювання по правому краю (права межа фонового зображення встала, вирівняний по правій межі області відведеної під абзац).

У правилі з position можна також використовувати слова і комбінації двох слів, які будуть визначати крайні позиції. Використовувати можна слова left, center, right, top, bottom, а так само їх комбінації і абсолютних, і відносних цифрових значень.

Наприклад, ось так можна задати крайні положення в позиціонуванні фонового зображення за допомогою слів (поруч наведені цифрові аналоги, щоб було зрозуміліше):

Причому, можна писати як «left top», так і «top left», бо суті це не міняє:

1. Left в комбінації означає нуль по осі абсцис
2. Right - 100% по осі абсцис
3. Top - нуль по осі ординат
4. Bottom - 100% по осі ординат
5. Center - 50% за обома осях

Поодинокі записи left, right, top, bottom, center увазі, що з ними в парі має стояти center (або 50%), тобто вирівнювання здійснюється по центру лівого, правого, верхнього, нижнього краю або по центру всієї області, відведеної для Html елемента, відповідно.

Хоча слова в background-position і здаються більш зрозумілими, але на практиці простіше і зрозуміліше буде використовувати цифри (абсолютні або відносні - не має значення), бо перша цифра це завжди X, а друга - Y. Слова ж можуть стояти в різній послідовності.

Що примітно, якщо в цьому чудовому CSS правилі написати тільки одне значення, то друге буде замінено за замовчуванням на 50% (середина по вертикалі).

Background-attachment і збірне CSS правило

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

Або ж на кшталт того, що робить плагін Simple Counters , Коли показники лічильника фоловерів у Твіттері передплатників за версією Feedburner залишаються нерухомі на сторінці при її прокручуванні:

У цього правила є лише два значення scroll (використовується за умовчанням) і fixed:

У background attachment ми задаємо точку відліку координат, від якої згодом відраховується відступ заданий в background position. При значенні scroll за початок координат приймається лівий верхній кут області Html елемента, для якого задається фонове зображення.

А ось при використанні значення fixed в background-attachment за початок координат приймається теж лівий верхній кут, але вже не якогось елементу, а області перегляду (тієї частини вебсторінки, яка зараз видно користувачеві на екрані його монітора).

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

background-image: url (https://ktonanovenkogo.ru/image/rss_no_drop1.png); background-repeat: no-repeat; background-position: 50%; background-attachment: fixed;

Я задав таке Css правило для розташованих вище трьох абзаців. Прокручуючи текст ви побачите, що проходячи через середину області перегляду з правого краю цих абзаців (якщо у вас дозвіл екрана 1280 на 1024, а якщо більше, то іконку ви взагалі можете не побачити, бо вона зрушиться правіше кордону параграфів) буде з'являтися фонове зображення в вигляді моєї іконки RSS .

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

Однак, якщо задати фіксоване положення фону для таких елементів як Body або ж Html (тобто в тегах, які охоплюють всю веб сторінку), то дана картинка буде видно завжди в області перегляду і саме таке застосування знаходить CSS властивість background-attachment в сучасної блокової верстці.

Є ще збірне правило Background, яке дозволяє об'єднати всі п'ять описаних вище правил в одному флаконі. Причому, значення для всіх п'яти в збірному варіанті можна буде використовувати в будь-якому порядку і в будь-якій кількості (вони унікальні і браузер їх один з одним не переплутає). Все, що ви не вкажете в явному вигляді, браузер вважатиме рівним значенню за замовчуванням.

background: #FEFCDE url (https://ktonanovenkogo.ru/image/logo.png) no-repeat 50%;

Показане в прикладі збірне правило застосовано до цього абзацу для наочності. Вийшло не гарно, але це не головне. Для даного параграфа використовується фонова заливка дивного жовтого кольору, а так само використовується зображення логотипу ЛайвІнтернет, вирівняне по центру абзацу. Оскільки для правила background-attachment ніякого значення не задано, то використовується значення scroll (прийняте за замовчуванням).

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

background-color: #FEFCDE

написати:

background: #FEFCDE

Бо все решта значення збірного правила будуть взяті за замовчуванням, а вам це і потрібно було.

Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru

Збірки по темі

Використовую для заробітку