Как растянуть фоновое изображение html
Ответы
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