Отже для того щоб зробити картинку фоном на сайті нам необхідно виконати кілька речей:
- Знайти цю картинку, бажано у високій роздільній здатності. Дуже прикольно в такому випадку виглядають картинки, де середина пуста, а збоку що то намальовано, для блогу це оптимальний результат. В принципі, зараз і сайти прагнуть до форматному блогу, так як це красиво і акуратно.
- Прописати код у файлі css, який допоможе нам зробити картинку фоном на сайті.
- Прописати діви в
З першим пунктом все зрозуміло. Правда коли я сам намагався знайти такі потрібні мені картинки, у мене не вийшло. Відмінним рішенням буде зробити таку картинку на замовлення у професійного дизайнера. Ну або у прагне ним стати. Отриману картинку нам треба завантажити на хостинг, в папку де знаходяться ваші картинки або в найбільш зручну папку для вас.
Робимо картинку фоном на сайті в css
Далі відкриваємо файл style.css нам необхідно в файлі стилів прописати код в якому буде вказано шлях до картинки. Завантаживши таку картинку за допомогою коду background ми отримаємо відмінний фон на сайті. У style.css у мене прописано наступне на одному з сайтів:
Як бачите зліва синьою стрілкою вказано код, який дозволяє завантажити необхідну нам картинку, для подальшої вставці фону на сайт. Можете написати те ж саме, не забудьте змінити назву картинки на своє. До речі у мене два контейнери. За виведення картинки фоном відповідає другий, а за фон у вигляді кольору відповідає перший контейнер. Це зроблено для того щоб якщо не завантажиться картинка з якоїсь причини, фон у вас буде. А також це застосовується для того, щоб картинка не різнився з фоном. Зазвичай краю вашої картинки будуть монотонними для того, щоб було гарне поєднання і не впадало в очі. Як бачите у мене фон завантажується з основною папки. Далі йдуть властивості картинки:
- no-repeat означає не повторювати картинку ні по горизонталі, ні по вертикалі. Якщо ви хочете зробити фоном картинку маленьку і повторювану вам необхідно вказати повторення по x або y осі.
- repeat-y повторення по вертикалі
- repeat-x повторення по горизонталі, якщо ви вкажете просто Repeat то повторення буде як по вертикалі, так і по горизонталі.
- Ну а center top вказує на те що картинку необхідно відцентрувати і притиснути до верхнього краю, це дуже хороший робочий метод і підійде вам практично до всіх цілям.
Далі нам необхідно знайти тег
в структурі сайту. У мене він знаходиться в header, шапці сайту. Дивимося малюнок:
Як бачите відбувається вставка коду з css, робиться це за допомогою такого коду:
Які фони бувають на сайті
У закінченні цього уроку давайте подивимося які фони можуть бути. Як я вже говорив один з найбільш крутих прийомів використання картинки з монотонними краями, наприклад таку:
Як бачите практично по периметру використано однотонна заливка коричневого кольору. Ось такий же колір робимо по всьому сайту і вставляємо картинку. Припустимо у нас ігровий блог і сама структура посередині. Краса, правда ж?).
Фоном також може бути простий колір, на ваш смак. Але це виглядає майже неефективно, зараз цим нікого не переконаєш.
Також непоганим способом буде вставка безшовного фону, як у мене на сайті, якщо буде досить гарний візерунок, то і виглядати цей фон буде непогано. Є велика кількість сервісів за допомогою яких можна зробити такі різноманітні і цікаві фони. Не забудьте в цьому випадку використовувати команду repeat.
Рекомендую до прочитання:
Наступний урок: Яндекс Метрика на вашому сайті, просто і легко.
Попередній урок: Кнопка вгору на сайті.