Как добавить изображение в css

В CSS изображение можно добавить как фоновое изображение для блока или с помощью свойства content. Рассмотрим оба варианта:

1. Добавление фонового изображения для блока

<div class="image-block">
   <h1>Заголовок</h1>
</div>

<style>
  .image-block {
    width: 500px;
    height: 500px;
    background-image: url('путь/к/изображению.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

Здесь мы задаем размеры блока .image-block и указываем путь к изображению с помощью свойства background-image. Для того, чтобы изображение не повторялось, применяем свойство background-repeat: no-repeat;. background-size: cover; обеспечивает масштабирование изображения, чтобы полностью заполнить заданные размеры блока.

2. Добавление изображения с помощью свойства content

<div class="image-block">
  <h1>Заголовок</h1>
  <span class="image"></span>
</div>

<style>
  .image {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url('путь/к/изображению.jpg');
    background-size: cover;
    margin-left: 10px;
  }
</style>

Здесь мы добавляем элемент span с классом image внутри блока .image-block. С помощью свойства background-image мы задаем изображение для элемента span. background-size обеспечивает масштабирование изображения, чтобы полностью заполнить заданные размеры элемента span.

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