Як зробити фон сторінки

Як зробити фон сторінки

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

Вам знадобиться

Текстовий редактор, браузер.

Інструкція

  1. Як зробити фон сторінки
    Відкрийте сторінку в браузері. Це потрібно для того, щоб контролювати вносяться зміни. Натисніть Ctrl + O, виберіть у меню пункти «File» і «Open File», або просто перетягніть html-файл у вікно браузера.
  2. Як зробити фон сторінки
    Відкрийте файл сторінки в текстовому редакторі. Редактор може бути будь-хто. Він повинен підтримувати редагування тексту в тій кодуванні, в якій текст подано в html-файлі.
  3. Як зробити фон сторінки
    Знайдіть у тексті html-розмітки закриває тег елемента HEAD. Елемент HEAD розміщується на самому початку тексту, безпосередньо за початковим тегом елемента HTML. Закриваючий тег елемента HEAD буде виглядати так: </ head>.
  4. Як зробити фон сторінки
    Додайте елемент STYLE перед закриває тегом елемента HEAD. Для цього перед текстом </ head> додайте текст:

    <style type=»text/css»>

    <! -

    ->

    </ Style>
  5. Як зробити фон сторінки
    Додайте порожній список правил з селектором BODY в елемент STYLE. Для цього між коментарями <! — І -> вставте текст:

    BODY

    {

    }
  6. Як зробити фон сторінки
    Зробіть фон сторінки залитим сірим кольором. Для цього додайте у щойно створений список правил наступне правило:

    background-color: # CCCCCC;

    Змініть значення # CCCCCC на інше, якщо необхідний інший колір фону. Тут кожні два наступних послідовно символу задають інтенсивність червоного, зеленого і синього кольорів каналів в шістнадцятковій системі числення. Наприклад, щоб зробити фон сторінки зеленим, напишіть значення # 00FF00. Можна також використовувати мнемонічні позначення кольорів. Наприклад, red, green, blue, yellow.

    Проконтролюйте зроблені зміни, оновивши сторінку в браузері.
  7. Як зробити фон сторінки
    Зробіть фон сторінки заповненим зображенням. Додайте до списку правил з селектором BODY правило background-image:

    background-image: url («weather-mist.png»);

    Тут weather-mist.png — url зображення, яке буде заповнювати фон сторінки. Оновлення сторінку в браузері для того, щоб побачити зміни.
  8. Як зробити фон сторінки
    Зробіть фон сторінки, складається з одного зображення. Додайте до списку правил з селектором BODY правила background-repeat і background-position:

    background-repeat: no-repeat;

    background-position: 5px 5px;

    Значення no-repeat вказує на те, що зображення не повинно дублюватися ні по горизонталі, ні по вертикалі. Значення 5px і 5px задають відступи фонового зображення зліва і зверху відповідно.

Зверніть увагу

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

Корисні поради

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