Для того чтобы растянуть фон на всю страницу в CSS, нужно задать высоту и ширину элемента body
и/или html
в 100%, а также убедиться в отсутствии отступов (margin
) и границ (border
).
Например, вот так будет выглядеть CSS-код для растягивания фона на всю страницу:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url("path/to/image.jpg");
background-size: cover;
}
Этот код устанавливает высоту и ширину для элементов html
и body
равными 100%, чтобы фон растянулся на всю страницу. Затем он удаляет отступы и границы, чтобы избавиться от нежелательных отступов.
Затем мы добавляем фоновое изображение с помощью свойства background-image
и задаем его размер с помощью свойства background-size
. Значение cover
гарантирует, что изображение будет растянуто и подстроено под размеры окна браузера.
Можно также использовать другие значения для background-size
для управления размером фонового изображения. Например, contain
растягивает изображение пропорционально, чтобы оно вместилось в размеры родительского элемента без обрезания.
2 комментария на «“Как растянуть фон на всю страницу CSS”»
Помню, когда изучала язык декорирования CSS, всегда забывала за background-size. Спасибо, что еще раз напомнили о масштабировании. Оно очень часто пригождается, особенно когда имеешь дело с оформлением главной страницы или статей в блоге.
очень просто