How to fix the bug with the position of background? - html

Question

The part of the border is hidden. I tried to use different variable of background-position. But it didn't help me.
Example of code:
* {
margin: 0;
padding: 0;
}
.container {
max-width: 1170px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}
.item_wrapper {
display: flex;
justify-content: space-between;
}
.items {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 270px;
background-image: url(https://svgshare.com/i/6MZ.svg);
min-height: 270px;
background-size: cover;
background-repeat: no-repeat;
padding: 0 20px;
}
<div class="container">
<div class="item_wrapper">
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
<div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
<div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
<div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporibus iusto. Vel quasi cupiditate magni excepturi recusandae!</div>
</div>
</div>
P.S. In the example the bottom border is hidden.

Answer 1

You need to force the background size to cover available width and height. In order to achieve that you must specify the background size: background-size: 100% 100%; so it will fill its container.
* {
margin: 0;
padding: 0;
}
.container {
max-width: 1170px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}
.item_wrapper {
display: flex;
justify-content: space-between;
}
.items {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 270px;
background-image: url(https://svgshare.com/i/6MZ.svg);
min-height: 270px;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0 20px;
}
<div class="container">
<div class="item_wrapper">
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
<div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
<div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
<div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporibus iusto. Vel quasi cupiditate magni excepturi recusandae!</div>
</div>
</div>

Answer 2

just make background-size: contain, it will fix your issue.