Как растянуть background css на всю ширину

Для того, чтобы растянуть фоновое изображение (background) на всю ширину веб-страницы в CSS, можно использовать свойство background-size.

Значение cover для этого свойства растянет изображение до полного заполнения блока веб-страницы, сохраняя пропорции:

body {
  background-image: url('my-image.jpg');
  background-size: cover;
}

Если вы хотите, чтобы изображение заполняло весь блок, без сохранения пропорций, можно использовать значение 100% 100%:

body {
  background-image: url('my-image.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

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

Поделиться в: