HTML з нуля: Як зробити фон на HTML-сторінці. Урок №12 Overcod.net

HTML з нуля: Як зробити фон на HTML-сторінці. Урок №12

Коли створюєш свою першу HTML-сторінку, вона зазвичай виглядає нудно — білий фон і чорний текст. Але можна легко додати фон: зробити сторінку кольоровою або поставити картинку. І для цього потрібен лише один тег — <body>.

Кольоровий фон сторінки

Найпростіший варіант — задати колір для всієї сторінки.
Для цього у тегу <body> є спеціальний атрибут bgcolor.

Приклад:

<body bgcolor="lightblue">
  <h1>Привіт!</h1>
  <p>Це моя сторінка з голубим фоном</p>
</body>

Тепер фон сторінки став голубим.
Замість lightblue можна поставити будь-який інший колір, наприклад:
red, green, yellow, gray, white, black — що завгодно.

Якщо хочеться точний відтінок, можна вказати код кольору:

<body bgcolor="#FAF0E6">
  <h1>Фон з кодом кольору</h1>
</body>

Фонова картинка

Кольоровий фон — добре, але іноді хочеться поставити красиву картинку.
Для цього є атрибут background, який додається до тегу <body>.

Приклад:

<body background="images/background.jpg">
  <h1>Красиво, правда?</h1>
  <p>Тепер на фоні картинка з папки images.</p>
</body>

Зверни увагу:

Картинка має бути в папці images, що поруч з HTML-файлом.
У шляху images/background.jpg потрібно написати точну назву файлу, включно з розширенням (.jpg, .png, .gif тощо).
Якщо шлях неправильний — фон не з’явиться.

Можна вказати і колір, і фон-картинку одночасно.
Колір буде видний, якщо картинка не завантажиться.

<body bgcolor="#dfefff" background="images/background.jpg">
  <h1>Комбінований фон</h1>
  <p>Якщо картинка не завантажиться, залишиться приємний голубий фон.</p>
</body>

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

Краще використовувати не дуже яскраві картинки, щоб текст зверху було легко читати.
Якщо картинка маленька, браузер повторить її плиткою по всій сторінці — це нормально.
Чим легше зображення (по розміру), тим швидше завантажується сторінка.