У меня следующая проблема: когда я даю элементу фоновое изображение (SVG) и позиционируюсь с помощью background-position, я получаю это крошечное пространство между изображением и элементом внизу.
body {
color: black;
margin:0;
padding: 0;
font-family: cursive;
background-color: tomato;
}
h1,h2,p {
margin:0;
}
.bighead {
min-height: 100vh;
background-image: url(../img/park.svg);
background-repeat: no-repeat;
background-position: center 100%;
}
.main-content {
min-height: 100vh;
background-color: white;
}
<body class="bg">
<header class="bighead">
<h1>header</h1>
</header>
<main class="main-content">
</main>
</body>
Чтобы решить эту проблему и сделать изображение полностью прилегающим к низу, я изменил значение вертикальной позиции на 100,5%, чтобы SVG опустился, переполнив элемент , Я хотел бы избежать этого и оставить весь файл SVG без какого-либо промежутка между изображением и нижним краем элемента .bighead. Обратите внимание, что я специально использую background-color на теле.
Вы заметили этот крошечный зазор внизу, верно? Почему это происходит?
Кстати, если вам нужен точный файл SVG, вы можете получить его из: https://undraw.co/search, просто найдите park и он будет отображаться как первое изображение.
Спасибо!