≡×МЕНЮ

• Поради
• Програми
• Огляди
• Рейтинги
• Ігри

Зображення як css фону. Адаптивне ціле фонове зображення за допомогою CSS. Як зробити фон привабливішим

Від автора:У цій навчальній статті ми розглянемо просту техніку створення фонового зображення, яке повністю розтягуватиметься на всю ширину вікна перегляду (viewport) браузера. Для цього нам знадобиться CSS-властивість background-size; JavaScript не потрібний.

Приклади адаптивних цілих фонових зображень

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

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

Базові принципи

Ось наш план дій.

Використовуйте властивості background-size, щоб повністю заповнити вікно перегляду

CSS-властивість background-size має значення cover. Значення cover повідомляє браузеру про те, що необхідно автоматично та пропорційно масштабувати ширину та висоту фонового зображення, щоб вони завжди були рівними або були більшими за ширину/висоти вікна перегляду.

Використовуйте медіа-запит для обробки невеликих фонових зображень для мобільних пристроїв

Щоб покращити швидкість завантаження сторінки на маленьких екранах, ми будемо використовувати медіа-запити для обробки зменшеної версії нашого фонового зображення. Це не обов'язково. Ця техніка працюватиме і без цього. Але чому використання невеликого фонового зображення для мобільних пристроїв є гарною ідеєю?

Зображення, яке я використовував у демо-прикладі, має роздільну здатність 5500x3600px. Цього дозволу вистачить більшості широкоформатних комп'ютерних моніторів, наявних у продажу. Але для цього доведеться обробляти файл розміром 1.7MB.

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

HTML

Для розмітки потрібно лише це:

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

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

CSS

Задаємо наступні стилі для елемента body:

body ( /* Шлях до зображення */ background-image: url(images/background-photo.jpg); /* Фонове зображення завжди відцентроване по вертикалі та горизонталі */ background-position: center center; /* Фонове зображення не повторюється * /background-repeat: no-repeat; /* Фонове зображення зафіксовано у вікні перегляду, тому воно не зміщується, коли висота контенту більше висоти зображення */background-attachment: fixed; background-size: cover; /* Встановлює фоновий колір, який відображатиметься, поки завантажується фонове зображення */ background-color: #464646 ;

body ( /* Шлях до зображення */ background-image: url (images/background-photo.jpg); /* Фонове зображення завжди відцентроване по вертикалі та горизонталі */ /* Фонове зображення не повторюється */ background-repeat: no-repeat; /* Фонове зображення зафіксовано у вікні перегляду, тому воно не зміщується, коли висота контенту більша за висоту зображення */ /* Ось що дозволяє фоновому зображенню підлаштовуватися під розмір контейнера */ background-size: cover; /* Встановлює фоновий колір, який відображатиметься, доки завантажується фонове зображення */ background - color: #464646;

Найбільш важлива пара властивість/значення, на яку слід звернути увагу:

background-size: cover;

background-size: cover;

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

Однак у цієї пари властивість/значення є одна проблема: якщо фонове зображення менше розмірів елемента body – що відбудеться на екранах з високою роздільною здатністю та/або коли у вас величезна кількість контенту на сторінці – браузер неминуче збільшить масштаб зображення. І, як ми знаємо, коли ми збільшуємо розміри растрового зображення, якість зображення знижується (тобто відбувається пікселізація).

Збільшення розміру зображення щодо вихідних розмірів позначається як зображення. Пам'ятайте про це, коли вибиратимете відповідне зображення. У демо-прикладі використовується величезна фотографія розміром 5500x3600px для широкоформатних моніторів, тому буде потрібно великий екран, щоб відбулося спотворення якості. Давайте рухатись далі. Щоб фонове зображення завжди було центром вікна перегляду, ми пропишемо:

background-position: center center;

background-position: center center;

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

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

background-attachment: fixed;

background-attachment: fixed;

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

Скорочений запис CSS

Я докладно розписав фонові властивості, щоб їх було легко пояснити. Рівнозначним буде і скорочений запис:

body (background: url(background-photo.jpg) Центр центр cover no-repeat fixed; )

body ( background : url ( background - photo . jpg ) center center cover no - repeat fixed ;

Все, що вам потрібно зробити, це змінити значення url, щоб вказати шлях до вашого фонового зображення.

Додатково: медіа-запит для маленьких екранів

Для маленьких екранів я використовував програму Photoshop, щоб пропорційно зменшити вихідне зображення до розміру 768x505px, а також я скористався сервісом Smush.it для того, щоб ще трохи зменшити розмір. Завдяки цьому розмір файлу зменшився із 1741KB до 114KB. Тобто. Розмір зображення зменшився на 93%.

Будь ласка, не зрозумійте мене неправильно, 114KB це ще досить багато для чисто естетичного елемента дизайну. Враховуючи додаткове навантаження в 114KB, я почав використовувати такий файл, тільки якщо б побачив можливість значно покращити досвід взаємодії користувача з сайтом (UX), т.к. зараз значна частка Інтернет трафіку посідає роботу мобільних пристроїв background - image : url ( images / background - photo - mobile - devices . jpg ) ;

У медіа-запиту встановлено обмеження по ширині max-width: 767px, що означає, що якщо вікно перегляду браузера більше 767px, то завантажуватиметься велике фонове зображення.

Недолік використання медіа-запиту полягає в тому, що якщо ви зміните ширину вікна вашого браузера, наприклад, з 1200px до 640px (або навпаки), ви відразу побачите момент завантаження маленького або великого фонового зображення.

Крім того, через те, що деякі пристрої з маленьким екраном можуть відображати більшу кількість пікселів – наприклад, iPhone 5 c дисплеєм retina здатний відобразити роздільну здатність 1136x640px – маленьке фонове зображення буде пікселізовано.

Підводячи підсумок

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

коротка інформація

Версії CSS

Значення

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

none Скасує зображення фону для елемента.

HTML5 CSS2.1 IE Cr Op Sa Fx

background-image

Об'єктна модель

Internet Explorer до версії 7.0 включно застосовує фон до внутрішньої частини межі елемента, у якого встановлено властивість hasLayout. Якщо елемент не має hayLayout , властивість background-image буде враховувати межі елемента, як це і задано в специфікації. Різниця у відображенні буде помітна, якщо межі пунктирні (dashed або dotted), а не суцільні.

Якщо для елемента значення встановлено як scroll або auto , Internet Explorer 8 буде вертикальна затримка в один піксел при прокручуванні фону.

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Якщо фон задається для рядка таблиці (тег ), то Chrome, Safari, iOS відображають його не так, як наказує специфікація, а саме для кожного осередку окремо. У той час як браузер повинен показувати цілісний фон для цілого ряду. У прикладі 2 наведено код, що демонструє помилку.

none Скасує зображення фону для елемента.

1

2

3

Результат цього прикладу в браузері Chrome показано на рис. 1. Браузер Internet Explorer, Opera та Firefox коректно відображають фон для рядка (рис. 2).

Мал. 1. Повторення фону для кожного осередку

Мал. 2. Фон для всього рядка

Від автора:всіх вітаю. Фонові кольори та зображення у веб-дизайні мають величезну роль, оскільки дозволяють привабливіше оформити будь-які елементи. Як зробити фон у 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, то була б лише одна картинка.

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

За допомогою повторення верстальники раніше досягали того, що створювали фонові текстури та градієнти, використовуючи одне малесеньке зображення. Воно могло бути 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 правил, які дозволяють встановити фон для будь-якого елемента в 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.

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

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

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

Background-color:#FEFCDE

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

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

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

Background-image:url(https://сайт/image/comment_top_focus.gif);

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

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

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

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

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




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

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



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

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

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

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

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

Background-image:url(https://сайт/image/logo.svg?1); background-repeat:no-repeat; background-position:400px 25px;

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

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

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

Png) no-repeat 50%;

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

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

Background-color:#FEFCDE

написати:

Background:#FEFCDE

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

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

Вам може бути цікаво

List style (type, image, position) - Css правила для налаштування зовнішнього вигляду списків у Html коді Як настроїти чергування фонового кольору рядків таблиць, списків та інших Html елементів на сайті за допомогою псевдокласу nth-child
Position (absolute, relative і fixed) - способи позиціонування Html елементів CSS (правила left, right, top і bottom)
Float і clear в CSS - інструменти блокової верстки
Позиціонування за допомогою Z-index та CSS правило Cursor для зміни курсору миші
Padding, Margin і Border - задаємо в CSS внутрішні та зовнішні відступи, а так само рамки для всіх сторін (top, bottom, left, right)
Display (block, none, inline) у CSS - задаємо тип відображення Html елементів на веб-сторінці
Пріоритети в Css та їх підвищення за рахунок Important, комбінація та угруповання селекторів, стилі користувача та авторські
CSS - що це таке, як таблиці каскадних стилів підключаються до Html коду за допомогою Style та Link
Селектори тега, класу (class), Id та універсальні, а також селектори атрибутів у сучасному CSS