Как сделать картинку фоном в HTML: простой и быстрый способ

Для того чтобы сделать картинку фоном в HTML, нужно использовать CSS свойство background-image. Вот пример кода:

HTML:

html



  


  

    
Пример использования картинки в качестве фона
  

CSS (style.css):

css
.container {
  background-image: url('background.jpg');
  background-size: cover; /* Подгонка размера фона под размер контейнера */
  background-position: center; /* Положение фона по центру */
  height: 100vh; /* Установка высоты контейнера на всю видимую область экрана */
}
h1 {
  color: white;
  text-align: center;
  padding-top: 50px;
}

В этом примере мы используем свойство background-image для установки изображения 'background.jpg' в качестве фона контейнера с классом 'container'. Свойство background-size: cover; автоматически подгоняет размер фона под размер контейнера, чтобы изображение полностью заполнило его. Свойство background-position: center; устанавливает положение фона по центру. Свойство height: 100vh; задает высоту контейнера на всю видимую область экрана.

Таким образом, код выше создаст контейнер с заданным изображением в качестве фона и выровненным по центру текстом заголовка.

Обратите внимание, что вам потребуется иметь файлы "background.jpg" и "style.css" в одной директории с вашим HTML файлом, чтобы код работал корректно.