Как растянуть фоновое изображение html

Question

Accepted Answer

Есть несколько способов растянуть фоновое изображение в HTML:

С помощью CSS свойства background-size:

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

Значение cover растянет изображение на всю ширину и высоту элемента, при этом сохраняя пропорции. Если пропорции изображения не соответствуют пропорциям элемента, то изображение будет обрезано.

С помощью CSS свойства background-repeat:

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

Значение no-repeat запрещает повторение изображения, а значение 100% 100% растягивает изображение на всю ширину и высоту элемента без обрезки. Однако, при изменении размеров элемента изображение может растягиваться неравномерно.

С помощью HTML атрибута style:

  
    style="background-image: url('image.jpg'); background-size: cover;"
  >

Этот способ аналогичен первому, но применяется только к определенному элементу. Для других элементов страницы нужно будет повторить этот атрибут.

Как растянуть фоновое изображение html

Похожие вопросы