Когда использовать background-image, а когда для изображений?

## Первым делом Если картинка **несёт смысл** (фото товара, схема, мем) — ` `/` `. Если **украшает** (текстура, декоративный blur) — CSS `background-image`. ## Почему - ` `: `alt`, фокус в дереве доступности, SEO, нативный lazy, `object-fit`. - Background: многослойность, `background-size: cover` для «заливки» блока без семантики. ```html ``` ```css .hero-banner { background-image: linear-gradient(...), url("noise.png"); } ``` Тест: «если картинка не загрузилась — текст страницы всё ещё понятен?» Если нет — это контент, не фон. ## Итог Контент → ` `; декор → background. Смешение ломает a11y и адаптивный выбор источника.

← К списку

Когда использовать background-image, а когда <img> для изображений?

CSS · middle · сложность 3

Войти, чтобы отмечать

Первым делом

Если картинка несёт смысл (фото товара, схема, мем) — <img>/<picture>. Если украшает (текстура, декоративный blur) — CSS background-image.

Почему

<img>: alt, фокус в дереве доступности, SEO, нативный lazy, object-fit.
Background: многослойность, background-size: cover для «заливки» блока без семантики.

<img src="product.webp" alt="Кроссовки Nike Air, вид сбоку" />

.hero-banner {
  background-image: linear-gradient(...), url("noise.png");
}

Тест: «если картинка не загрузилась — текст страницы всё ещё понятен?» Если нет — это контент, не фон.

Итог

Контент → <img>; декор → background. Смешение ломает a11y и адаптивный выбор источника.

Загрузка…