Страницы

Поиск по вопросам

пятница, 1 марта 2019 г.

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

В процессе верстки столкнулся с такой проблемой:
По какой-то причине небольшая часть фона обрезается.
Код: 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


Ответ

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

Комментариев нет:

Отправить комментарий