Як зробити фон в html

фонові малюнки

У зв’язку з особливостями веб-сторінок, фонові малюнки набувають значну роль при верстці документів сайту. При цьому вони активно беруть участь в самих різних справах, наприклад, автоматизують процес приєднання малюнків до тексту, створюють градієнтні переходи і, звичайно, додають фон під вмістом. Далі розглянуті деякі аспекти застосування фонових зображень.

Фон на веб-сторінці

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

В CSS є п’ять атрибутів, які управляють фоновою картинкою: її додаванням, положенням і повторенням. Однак всі ці параметри замінює одне універсальне властивість background, його і будемо використовувати надалі.

Додавання фонового малюнка

Додавання малюнка відбувається шляхом установки адреси картинки через ключове слово url . Щоб керувати повторенням картинки застосовуються аргументи no-repeat (немає повторення), repeat-x (повторення по горизонталі) і repeat-y (повторення по вертикалі). Завдяки цьому можна отримати веб-сторінку, наведену на рис. 1.

Мал. 1. Фонова картинка без повторення

Мал. 1. Фонова картинка без повторення

Щоб встановити картинку на веб-сторінку, слід додати стильову властивість background до селектора BODY, як показано в прикладі 1.

приклад 1. фоновий малюнок

В даному прикладі графічний малюнок target.gif визначається як фон веб-сторінки без повторення зображення. Щоб картинка не прилягала щільно до країв браузера, вона зміщується на 30 пікселів вправо і на 20 пікселів вниз від свого початкового положення.

повторення малюнка

Завдяки тому, що можна задавати повторення фонового малюнка по горизонталі або вертикалі, є кілька варіантів оформлення веб-сторінок. Наприклад, для створення вертикальної смуги по лівому краю (рис. 2) знадобиться зображення, показане на рис. 3.

Мал. 2. Повторення малюнка по вертикалі

Мал. 2. Повторення малюнка по вертикалі

Мал. 3. Картинка для створення фону

Малюнок повинен бути таким, щоб по вертикалі він стикуються між собою без помітних швів, а також складав єдине ціле із заданим кольором фону веб-сторінки. У прикладі 2 наводиться створення такого фонового малюнка, знову ж за допомогою властивості background і його значення repeat-y .

приклад 2. Повторення фону по вертикалі

Аналогічно можна робити повторення фону по горизонталі, наприклад, створивши градієнт і встановивши його в якості фонової картинки (рис. 4).

Мал. 4. Використання градієнта в якості фону

Мал. 4. Використання градієнта в якості фону

Щоб отримати веб-сторінку, наведену на рис. 4, потрібно спочатку зробити картинку з градієнтним переходом. Ширину досить вказати 20-40 пікселів, а висота малюнка залежить від мети документа і передбачуваної висоти вмісту веб-сторінки. Не варто також забувати, що малюнок великого розміру призведе до збільшення обсягу графічного файлу. А це негативно позначиться на швидкості його завантаження і, в кінцевому підсумку, призведе до уповільнення відображення фону. Для даного випадку цілком підійшла картинка розміром 30х200 пікселів (рис. 5).

Мал. 5. Градієнтне зображення для створення фону

У прикладі 3 показаний код HTML для створення градієнтного фону.

приклад 3. Повторення фону по горизонталі

Метод найшвидшого малюнок добре поєднується з одноколірним блоком, тому в даному прикладі додається шар, в якому і відображається вміст веб-сторінки.

Додавання малюнка до тексту

За допомогою фонового зображення можна автоматизувати процес додавання малюнків до певного тексту, наприклад, до заголовків. Для цього використовується універсальне властивість background, яке застосовується до потрібного селектору. Як значення вказують шлях до малюнка і, щоб він не повторювався, аргумент no-repeat (приклад 4).

приклад 4. Додавання малюнка

Як показано в даному прикладі, малюнок можна зрушувати по горизонталі і вертикалі щодо свого вихідного положення, за замовчуванням це лівий верхній кут блокового елемента. Зрушення фону дозволяє встановити зображення по відношенню до тексту бажаним чином. Щоб текст не накладався на малюнок, обов’язково слід додати властивість padding-left, за рахунок нього текст зміщується вправо на вказану відстань. Воно в кожному випадку індивідуально і зазвичай дорівнює ширині малюнка плюс бажаного відступу між зображенням і текстом.

Дізнайтеся як зробити фон сторінки в html документі і створюйте свої статті наочно читаються і структурованими

Доброго часу доби всім бажаючим дізнатися і засвоїти щось нове! Ви коли-небудь звертали увагу на зовнішній вигляд сайтів, при розробці яких творці полінувалися оформити фон сторінок? І я звертав. Це виглядає убого. Часто через відсутність звичних нам поділів між різними видами інформації вона змішується і просто відпадає бажання далі що-небудь дивитися на такому веб-ресурсі.

Щоб такого лиха не сталося з вашим проектом я вирішив написати статтю на тему: «Як зробити фон сторінки в html». Прочитавши публікацію, ви дізнаєтеся, за допомогою яких інструментів можна задавати фонове оформлення, як зробити фон фіксованим або змінним і багато іншого, що допоможе зробити привабливим ваш сайт. А тепер почнемо!

Основні інструменти для завдання фону веб-сторінок

Для установки фонового зображення розробниками веб-мов був передбачений атрибут background. Він є як в html, так і в css.

У мові розмітки — це атрибут тега body, а в стильових таблицях — універсальна властивість, яке дозволяє задати до 5 характеристик заднього плану одночасно. Background — досить гнучкий елемент, який можна використовувати для завдання фону у вигляді одного кольору, кольоровий картинки або навіть анімації.

Так, для установки фонового зображення через одиницю html досить написати такий код: .

HTML Зображення фон

Фонове зображення може бути задано практично для будь-якого HTML елемента.

Фонове зображення на HTML елементі

Щоб додати фонове зображення в HTML елемент, використовуйте атрибут HTML style і CSS властивість background-image:

приклад

Додавання фонового зображення на HTML елемент:

Ви також можете вказати фонове зображення в елементі

Фонове зображення на сторінці

Якщо ви хочете, щоб вся сторінка мала фонове зображення, ви повинні вказати фонове зображення в елементі:

приклад

Додайте фонове зображення для всієї сторінки:

фоновий повтор

Щоб друкувати водяний знак менше елемента, то зображення буде повторюватися по горизонталі і вертикалі, поки не досягне кінця елемента:

приклад

Щоб фонове зображення не повторювалося, встановіть для властивості background-repeat значення no-repeat .

приклад

фонова обкладинка

Якщо ви хочете, щоб фонове зображення покривало весь елемент, ви можете встановити для властивості background-size значення cover.

Крім того, щоб переконатися, що весь елемент покритий, встановіть для властивості background-attachment значення fixed:

Таким чином, фонове зображення буде покривати весь елемент, що не розтягуючись (зображення збереже свої початкові пропорції):

приклад

фонова розтяжка

Якщо ви хочете, щоб фонове зображення розтягувалося, щоб відповідати всьому елементу, ви можете встановити для властивості background-size значення 100% 100%:

Спробуйте змінити розмір вікна браузера, і ви побачите, що зображення буде розтягуватися, але завжди охоплювати весь елемент.

приклад

Дізнайтеся більше про CSS

З наведених вище прикладів ви дізналися, що фонові зображення можна стилізувати за допомогою властивостей фону CSS.

Щоб дізнатися більше про властивості фону CSS, вивчіть наші CSS Background Підручник.

Ссылка на основную публикацию