Один з найбільш поширених питань на форумі "Як замінити фон сайту?", В сьогоднішньому уроці ви навчитеся робити це з урахуванням деяких тонкощів які виникнуть в процесі.
Допоможе нам у цьому css властивість background-image до якого ми підключимо фонове зображення, на практиці це виглядає так:
background-image: url (шлях до файлу);
Нам залишається завантажити зображення за допомогою опції завантаження файлів в адмінпанелі сайту (або можна скористатися будь-яким хостингом зображень, але варто врахувати що надійніше все таки завантажувати зображення собі на сайт, тим більше що простір необмежена) і замінити текст в дужках на посилання отриману в результаті завантаження .
При цьому варто враховувати що даний спосіб підходить для установки в якості фону тільки безшовних текстур, так як зображення фону буде повторюватися по вертикалі і горизонталі і складатися в одну текстуру не має кордонів.
Для того що б встановити в якості фону повнорозмірне зображення потрібно прописати додаткові властивості які зафіксують і розташують картинку в потрібному нам місці. У цьому нам допоможуть властивості:
- background-attachment (вказує чи буде прокручуватися зображення разом з контентом)
- background-position (встановлює положення елемента щодо країв вікна браузера)
- background-repeat (дає знати чи потрібно повторювати зображення по вертикалі і горизонталі)
І ось як це виглядає на практиці:
background-image: url (шлях до файлу);
background-position: 50% 0%;
З подібними установками наше зображення фону буде зафіксовано від прокрутки, встановлено по центру екрана браузера, притиснуто до верхньої межі вікна, і не буде повторюватися по осях X і Y. І в цьому випадку варто враховувати розмірність картинки, тобто потрібно вибирати зображення яке буде перекривати вікно моніторів з великою роздільною здатністю. Цілком достатньо стандартного розміру 1920х1200.