Как загрузить картинку в CSS

В CSS нельзя загрузить картинку напрямую, но можно использовать картинку, которая уже загружена в HTML-документе.

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

HTML-разметка:

<div class="image-container">
  <img src="my-image.jpg" alt="Моя картинка">
</div>

CSS-стили:

.image-container {
  background-image: url('my-image.jpg');
  width: 500px;
  height: 500px;
}

В данном примере мы создаем контейнер для картинки с классом image-container. Внутри контейнера мы размещаем элемент img, который загружает картинку my-image.jpg. Затем мы используем свойство background-image для загрузки этой же картинки в CSS.

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

Стоит отметить, что при использовании background-image для вывода картинки, важно указывать размер контейнера (ширина и высота) с учетом размеров самой картинки. Это поможет сохранить пропорции изображения и избежать искажения картинки.

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