ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

En Ua

HTML Фоновое изображение

❮ Prev Next ❯

Фоновое изображение можно указать почти для любого элемента 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 Фон на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

  • Как добавить фоновое изображение к HTML-элементам?
  • Какой атрибут используется для добавления фонового изображения?
  • Какое CSS-свойство используется для добавления фонового изображения?
  • Где нужно указать путь к фоновому изображению, чтобы вся страница должна быть с фоновам изображением?
  • Как будет отображаться на странице фоновое изображение, если оно меньше HTML-элемента?
  • Какое значение нужно установить для свойства background-repeat, чтобы избежать повторения фонового изображения?
  • Какое значение нужно установить для свойства background-size, чтобы фоновое изображение охватывало весь HTML-элемент?
  • Какое значение нужно установить для свойства background-attachment, чтобы весь HTML-элемент был всегда покрыт?
  • Какое значение нужно установить для свойства background-size, чтобы фоновое изображение растягивалось, чтобы вместить весь HTML-элемент?
❮ Prev Next ❯