HTML с нуля: Как сделать фон на странице. Урок №12 Overcod.net

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>

Несколько полезных советов

Лучше использовать не слишком яркие картинки, чтобы текст сверху было легко читать.
Если картинка маленькая, браузер повторит её плиткой по всей странице — это нормально.
Чем легче изображение (по размеру файла), тем быстрее загрузится страница.