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

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

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

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

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

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

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



Фон изображения

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





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


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

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

Пример

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

<div style="background-image: url('img_girl.jpg');">
Редактор кода »

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

Пример

Укажите фоновое изображение в элементе style:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
Редактор кода »

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

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

Пример

Добавление фонового изображения на страницу HTML:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>
Редактор кода »

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

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

Чтобы объяснить, посмотрите, что происходит, когда мы используем небольшое изображение в качестве фона внутри большого элемента div:

Свойство background-image будет пытаться заполнить элемент div с изображениями, пока он не достигнет конца.

Пример

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
Редактор кода »

Чтобы избежать повторения фонового изображения, используйте свойство background-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 Фон.