您需要强制背景大小覆盖可用的宽度和高度。为了实现这一点,必须指定背景大小:
background-size: 100% 100%;
所以它会装满它的容器。
* {
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>
