Верстка веб-сайту: як в 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 стиль підганяти під необхідні браузери. Крім того, в сучасний час розвитку смартфонів багато веб-розробники намагаються створити сайти, адаптовані і під мобільні версії і під комп`ютерний вид.