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

Сучасний ринок фрілансу відкриває широкі можливості для замовлення розробки і модифікації сайту у фахівців. Це дозволяє зовсім не вдаватися в технічні деталі і різні аспекти створення web-сторінок. Але що, якщо ваш сайт складається всього з декількох документів, а необхідно лише зробити фон сторінки певного кольору або розмістити в ньому картинку. Залучення фахівця виявляється невиправдано дорогим. Але таку дрібницю можна зробити самому всього за кілька хвилин.
Як зробити фон сторінки
Відкрийте сторінку в браузері. Це потрібно для того, щоб контролювати вносяться зміни. Натисніть Ctrl + O, виберіть у меню пункти "File" і "Open File", Або просто перетягніть html-файл у вікно браузера.
фон сторінки" class ="lightbx" data-lightbox ="article-image"gt;Як зробити & lt; strong & gt; фон & lt; / strong & gt; & Lt; b & gt; сторінки & lt; / b & gt;
2
Відкрийте файл сторінки в текстовому редакторі. Редактор може бути будь-хто. Він повинен підтримувати редагування тексту в тій кодуванні, в якій текст представлений в html-файлі.
фон сторінки" class ="lightbx" data-lightbox ="article-image"gt;Як зробити & lt; strong & gt; фон & lt; / strong & gt; & Lt; b & gt; сторінки & lt; / b & gt;
3
Знайдіть в тексті html-розмітки закриває тег елемента HEAD. Елемент HEAD розміщується на самому початку тексту, безпосередньо за початковим тегом елемента HTML. Закриває тег елемента HEAD буде виглядати так:.


фон сторінки" class ="lightbx" data-lightbox ="article-image"gt;Як зробити & lt; strong & gt; фон & lt; / strong & gt; & Lt; b & gt; сторінки & lt; / b & gt;
4
Додайте елемент STYLE перед закриває тегом елемента HEAD. Для цього перед текстом додайте текст:
фон сторінки" class ="lightbx" data-lightbox ="article-image"gt;Як зробити & lt; strong & gt; фон & lt; / strong & gt; & Lt; b & gt; сторінки & lt; / b & gt;
6
Зробіть фон сторінки залитим сірим кольором. Для цього додайте в щойно створений список правил наступне правило: background-color: # CCCCCC-Змініть значення #CCCCCC на інше, якщо необхідний інший колір фона. Тут кожні два наступних послідовно символу задають інтенсивність червоного, зеленого і синього кольорів каналів в шістнадцятковій системі числення. Наприклад, щоб зробити фон сторінки зеленим, напишіть значення # 00FF00. Можна також використовувати мнемонічні позначення кольорів. Наприклад, red, green, blue, yellow.Проконтроліруйте зроблені зміни, оновивши сторінку в браузері.
фон сторінки" class ="lightbx" data-lightbox ="article-image"gt;Як зробити & lt; strong & gt; фон & lt; / strong & gt; & Lt; b & gt; сторінки & lt; / b & gt;
7



Зробіть фон сторінки заповненим зображенням. Додайте в список правил з селектором BODY правило background-image: background-image: url ("weather-mist.jpg") -Тут Weather-mist.jpg - url зображення, яке буде заповнювати фон сторінки. Оновлення сторінку в браузері для того, щоб побачити зміни.
фон сторінки" class ="lightbx" data-lightbox ="article-image"gt;Як зробити & lt; strong & gt; фон & lt; / strong & gt; & Lt; b & gt; сторінки & lt; / b & gt;
8
Зробіть фон сторінки, що складається з одного зображення. Додайте в список правил з селектором BODY правила background-repeat і background-position: background-repeat: no-repeat-
background-position: 5px 5px-Значення no-repeat вказує на те, що зображення не повинно дублюватися ні по горизонталі, ні по вертикалі. Значення 5px і 5px задають відступи фонового зображення зліва і зверху відповідно.
фон сторінки" class ="lightbx" data-lightbox ="article-image"gt;Як зробити & lt; strong & gt; фон & lt; / strong & gt; & Lt; b & gt; сторінки & lt; / b & gt;

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

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

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

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


Увага, тільки СЬОГОДНІ!


Оцініть, будь ласка статтю
Всього голосів: 167
Увага, тільки СЬОГОДНІ!