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

Аватар пользователя Aleksey
Aleksey
06 апреля 2023

Есть несколько способов растянуть фоновое изображение в 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:
  <body
    style="background-image: url('image.jpg'); background-size: cover;"
  ></body>

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

0 0

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

1
ответ