CODEWITHSUNDEEP
htmlcsssvgbackground
uzi_no_uzi
uzi_no_uzi

Reputation: 115

How to fix the bug with the position of background?

enter image description here

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.

Upvotes: 0

Views: 25

Answers (2)

RASHID KHAN
RASHID KHAN

Reputation: 1

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

Upvotes: 0

muecas
muecas

Reputation: 4335

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>

Upvotes: 1

Related Questions