Верстка веб-сайту: як у html зробити фон картинкою

Багато починаючі верстальники, тільки вникающие в суть створення сайтів, часто задаються питанням, як в html зробити фон картинкою. І якщо деякі й можуть розібратися з цим завданням, то все одно виникають проблеми під час розтягування зображення на всю ширину монітора. При цьому хотілося б, щоб сайт однаково відображався на всіх браузерах, тому повинна виконуватися вимога кросбраузерності. Можна встановити фон двома способами: за допомогою HTML тегів і CSS-стилю. Кожен сам для себе вибирає найбільш оптимальний варіант. Звичайно, CSS стиль набагато зручніше, адже його код зберігається в окремому файлі і не займає зайві колонки в основних тегах сайту, але перш розглянемо простий метод встановлення зображення на фон сайту.

Основні теги HTML для створення фону

Отже, переходимо до питання, як зробити картинку фоном в html на весь екран. Для того щоб сайт гарно виглядав, необхідно розуміти одну досить важливу деталь: досить просто зробити градієнтний фон або зафарбувати його однотонним кольором, але якщо вам необхідно вставити на задній план картинку, вона не буде розтягуватися на всю ширину монітора. Зображення спочатку потрібно підібрати або самостійно зробити дизайн з таким розширенням, в якому у вас буде відображатися сторінка сайту. Тільки після того як фонове зображення готове, переносимо його в папку з назвою «Images». У ній ми будемо зберігати всі використовувані картинки, анімації та інші графічні файли. Ця папка повинна знаходитися в кореневому каталозі з усіма вашими файлами html. Тепер можна переходити і до коду. Існує кілька варіантів запису коду, за допомогою якого фон буде змінюватися на картинку.

  1. Написати атрибутом тегу.
  2. Через CSS стиль в HTML коді.
  3. Написати CSS стиль в окремому файлі.

Як у HTML зробити фон картинкою, вирішувати вам, але хотілося б сказати пару слів про те, як було б найбільш оптимально. Перший метод за допомогою написання через атрибут тега вже давно застарів. Другий варіант використовується в дуже рідкісних випадках, тільки тому що виходить багато однакового коду. А третій варіант найбільш розповсюджений і ефективний. Ось приклади тегів HTML:

  1. Перший спосіб запису через атрибут тега (body) у файлі index.htm. Він записується в такому вигляді: (body background= «Название_папки/Название_картинки.розширення»)(/body). Тобто якщо у нас картинка з назвою «Picture» і розширенням JPG, а папку ми назвали як «Images», тоді запис HTML-коду буде виглядати так: (body background=»Images/Picture.jpg»)… (/body).
  2. Другий метод запису зачіпає CSS стиль, але записується в тому ж файлі з назвою index.htm. (body style=»background: url(‘../Images/Picture.jpg’)»).
  3. І третій спосіб запису проводиться у двох файлах. У документі з назвою index.htm у тезі (head) записується така строчка: (head)(link rel=»stylesheet» type=»text/css» href=»Путь_к CSS_файлу»)(/head). А у файлі стилів з назвою style.css вже записуємо: body {background: url(Images/Picture.jpg’)}.

Як у HTML зробити фон картинкою, ми розібрали. Тепер необхідно зрозуміти, як розтягнути зображення по ширині всього екрану.

Способи розтягування фонової картинки на ширину вікна

Представимо наш екран в процентному вигляді. Виходить, що вся ширина і довжина екрана буде складати 100% х 100%. Нам необхідно розтягувати картинку на цю ширину. Додамо до запису зображення в файл style.css рядок, яка і буде розтягувати зображення на всю ширину та довжину монітора. Як це записується в CSS стилі? Все просто!

body

{

background: url(Images/Picture.jpg’)

background-size: 100%; /* така запис підійде для більшості сучасних браузерів */

}

Ось ми і розібрали, як зробити картинку фоном в html на весь екран. Є ще спосіб запису у файлі index.htm. Хоч цей метод і застарілий, але для новачків необхідно знати і розуміти. У тезі (head)(style) div { background-size: cover; } (/style) (/head) цей запис означає, що ми виділяємо спеціальний блок для фону, який буде позиціонуватися по всій ширині вікна. Ми розглянули 2 способи, як зробити фон сайту картинкою html, щоб зображення розтягувалося на всю ширину екрану в будь-якому з сучасних браузерів.

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

Якщо ви вирішили використовувати зображення в якості фону майбутнього веб-ресурсу, тоді вам просто необхідно дізнатися, як зробити його нерухомим, щоб він не розтягувався в довжину і не псував естетичний вигляд. Досить просто за допомогою HTML коду прописати це невелике доповнення. Вам необхідно у файлі style.css дописати одну фразу після background: url(Images/Picture.jpg’) fixed; або замість неї додати після крапки з комою окремий рядок — position: fixed. Таким чином, ваш фоновий малюнок стане нерухомим. Під час прокручування контенту на сайті, ви побачите, що текстові рядки рухаються, а фон залишається на місці. Ось ви і навчилися, як у html зробити фон картинкою, декількома способами.

Робота з таблицею в HTML

Багато недосвідчені веб-розробники, стикаючись з таблицями і блоками, часто не розуміють, як в html зробити картинку фоном таблиці. Як і всі команди HTML і CSS-стилю, цей мовами веб програмування досить простий. І рішенням такого завдання написання пари рядків коду. Ви вже повинні знати, що написання табличних рядків і стовпців позначається відповідно як теги (tr) і (td). Щоб фон таблиці зробити у вигляді зображення, необхідно дописати до тегу (table), (tr) або (td) просту фразу із зазначенням посилання на картинку: background = » URL картинки. Для наочності наведемо кілька прикладів.

Таблиці з картинкою замість фону: HTML приклади

Намалюємо таблицю 2х3 і зробимо її фоном зображення, збережене у папці «Images»: (table background = «Images/Picture.jpg») (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблиця буде зафарбований в фон картинки.

Тепер намалюємо цю ж табличку розмірами 2х3, але вставити картинку в стовпчики під номером 1, 4, 5 і 6. (table)(tr)(td background = “Images/Picture.jpg»)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = «Images/Picture.jpg»)4(/td) (td background = «Images/Picture.jpg»)5(/td) (td background = «Images/Picture.jpg»)6(/td) (/tr) (/table). Після перегляду бачимо, що фон з’являється тільки в тих комірках, в яких ми прописали, а не у всій таблиці.

Кросбраузерність сайту

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

 

 

Related posts

 
 

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://poradumo.com.ua/89083-verstka-veb-saity-iak-y-html-zrobiti-fon-kartinkou/