Проблема с позиционированием фона

#html #css #background

В процессе верстки столкнулся с такой проблемой:


По какой-то причине небольшая часть фона обрезается.

Код: Less



	.about-us__information {
		display: flex;
		justify-content: space-between;
		.information__about-us-items {
			padding: 30px 20px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: url(../img/item-border.svg);
			background-repeat: no-repeat;
			background-size: cover;
			max-width: 270px;
			.about-us-items__head-line {
				text-align: center;
				h3 {
					color: @blackColor;
					font-size: 2rem;
					font-family: @FfontSans;
					margin: 28px 0px 16px 0px;
				}
			}
			.about-us-items__information {
				p {
					line-height: 25px;
					font-size: 1.4rem;
					color: @grayColor;
					font-family: @FfontSans;
					font-weight: @WfontRegular;
				}
			}
		}
	}
}




Вот свойства, которые отвечают за фон и сами блоки с фонами:

    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../img/item-border.svg);
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 270px;


Пробовал задавать background-position в различных вариациях, ни один из вариантов
не дал нужного результата. В чем может быть проблема?



* {
  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;
  
}

Воспроизводимый пример:

  

    
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!
  
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!
  
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?
  
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!
  





Сниппет: https://codepen.io/anon/pen/BxNpeR
    

Ответы

Ответ 1

Для шрифта я применил размер в vh - т.е высота о viewport 
Что бы это vh отображался корректно я применил медиа запросы  , разумеется что они
будут работать для всего документа
Как видно(svg из прошлого вашего вопроса)он полностью поместился и весь svg стал
резиновым , в медиа запросах изменить flex-wrap:wrap и блоки сделать на 40% от размера
родителя

Если в моём ответе что то не корректно или что то я не так понял поясни



 html,body,svg{
  font-size:1.4vw;
}

.item{
  width:300px;
}
.items{
  display:flex;
  align-items:center;
  justify-content: center;
  height:300px;
  width:1005;
}
@media (max-width:1000px){
  html,body,svg{
font-size:1.6vh;
box-sizing:border-box;
  }
  .items{
flex-wrap:wrap;
justify-content: space-around;
align-items:center;

  }
  .item{
width:49%;
  }
}

@media (max-width:480px){
  html,body,svg{
font-size:2vh;
  }
  
  svg{
width:400px;
margin:auto;
  }
  .items{
display:block;
text-align:center;
  }
  .item{
width:90%;
margin:20px auto;
  }
} 

@media (min-width:1000px){
  html,body,svg{
font-size:1.4vh;
  }
}




  

    
  

  

    
  

  

    
  

  

    
  





Шрифт в сниппете троит , в песочнице работает нормально :https://codepen.io/topicstarter/pen/xjGwEa?editors=1100


Ответ 2

Решением является background-size: 100% 100%; Нужно растянуть фон по всей ширине
и по всей высоте.