Як додати фон на сайт

Як додати фон на сайт

Фон у вихідному коді веб-сторінок, в залежності від використаного дизайну, може задаватися або зазначенням кольору, або посиланням на файл зображення з додаванням параметрів її позиціонування. Це може бути зроблено безпосередньо в HTML-тегах, в окремому CSS-блоці в заголовній частині исходника або в окремому файлі з описами стилів.

Інструкція

  1. Відкрийте вихідний код того блоку, який використовується на вашому сайті для завдання фону його сторінок. При використанні будь-якої системи управління цей блок, як правило, виділяється в окремий файл. Сама система управління має інструменти для його редагування безпосередньо в браузері. Залежно від конкретної системи ця процедура може бути організована по-різному — наприклад, через редактор сторінок. Якщо ви не використовуєте системи управління, то відповідний файл треба викачати до себе в комп’ютер і відкрити в будь-якому редакторі. Краще використовувати спеціалізований HTML-редактор, але можна користуватися і найпростішим Блокнотом.
  2. Додайте в тег body атрибут bgcolor із зазначенням колірного відтінку, якщо фоном сторінки повинен бути колір, а не картинка. Наприклад:

    <body bgcolor=»DarkOrange»>

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

    <body bgcolor=»#FF8C00″>
  3. Використовуйте атрибут background замість bgcolor в теге body, якщо фон повинен бути заданий зображенням, а не кольором. Наприклад, якщо файл з фоновим зображенням називається bgPic.gif і лежить на сервері в папці images, то тег body може бути записаний так:

    <body background=»url(images/bgPic.gif)»>
  4. Помістіть в заголовну частину вихідного коду опис стилів, якщо хочете ставити фон сторінки з використанням мови CSS. Наприклад, опис стилів на мові CSS, що заміняє вказаний в тезі body темно-оранжевий колір як фон, може виглядати так:

    <style type=»text/css»>

     body {background-color: DarkOrange;}

    </ Style>

    А задати фонову картинку можна таким описом стилів:

    <style type=»text/css»>

     body {background: # FF8C00 url (images / bgPic.gif) repeat-y;}

    </ Style>

    Тут крім посилання на картинку зазначений і фоновий колір (# FF8C00) — якщо на сторінці будуть місця, не закриті фоновим зображенням, то вони будуть пофарбовані в зазначений тут колірний відтінок. Параметр repeat-y задає повторення фонового зображення по вертикалі (вздовж осі Y). Якщо повторювати зображення потрібно по горизонталі, то слід використовувати значення repeat-x, а для заборони повторення малюнка — no-repeat. Помістити опис стилів можна перед тегом </ head>, що закриває заголовну частину HTML-коду.
  5. Збережіть зроблені зміни в редакторі сторінок, або збережіть і завантажте скачаний файл назад на сервер, якщо редагування коду вироблялося у файлі на вашому комп’ютері.