САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Учебник

HTML ГЛАВНАЯ HTML Введение HTML Редактор HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвет HTML с CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML с JavaScript HTML Путь к Файлу HTML Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

HTML Формы HTML Элементы ввода HTML Типы ввода HTML Атрибуты ввода HTML Атрибты форм ввода

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

HTML Примеры HTML Тестирование HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные Атрибуты HTML Поддержка Браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы Документов HTML Кодировка Символов HTML URL Кодировка HTML Коды Языка HTTP Сообщения HTTP Методы PX в EM Конвертер Клавишные Комбинации

HTML Изображение фон



Фоновое изображение может быть задано практически для любого HTML элемента.


Фоновое изображение на HTML элементе

Чтобы добавить фоновое изображение в HTML элемент, используйте атрибут HTML style и CSS свойство background-image:

Пример

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

<div style="background-image: url('img_girl.jpg');">
Попробуйте сами »

Вы также можете указать фоновое изображение в элементе <style> в разделе <head>:

Пример

Задания фонового изображения в элементе <style>:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
Попробуйте сами »

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

Если вы хотите, чтобы вся страница имела фоновое изображение, вы должны указать фоновое изображение в элементе <body>:

Пример

Добавьте фоновое изображение для всей страницы:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>
Попробуйте сами »


Фоновый повтор

Если фоновое изображение меньше элемента, то изображение будет повторяться по горизонтали и вертикали, пока не достигнет конца элемента:

Пример

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
Попробуйте сами »

Чтобы фоновое изображение не повторялось, установите для свойства background-repeat значение no-repeat.

Пример

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
Попробуйте сами »

Фоновая обложка

Если вы хотите, чтобы фоновое изображение покрывало весь элемент, вы можете установить для свойства background-size значение cover.

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

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

Пример

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
Попробуйте сами »

Фоновая растяжка

Если вы хотите, чтобы фоновое изображение растягивалось, чтобы соответствовать всему элементу, вы можете установить для свойства background-size значение 100% 100%:

Попробуйте изменить размер окна браузера, и вы увидите, что изображение будет растягиваться, но всегда охватывать весь элемент.

Пример

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>
Попробуйте сами »

Узнайте больше о CSS

Из приведенных выше примеров вы узнали, что фоновые изображения можно стилизовать с помощью свойств фона CSS.

Чтобы узнать больше о свойствах фона CSS, изучите наши CSS Background Учебник.