В процессе верстки столкнулся с такой проблемой:
По какой-то причине небольшая часть фона обрезается.
Код: 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;
}
Воспроизводимый пример:
Сниппет: https://codepen.io/anon/pen/BxNpeR
Ответ
Решением является background-size: 100% 100%; Нужно растянуть фон по всей ширине и по всей высоте.
Комментариев нет:
Отправить комментарий