Я пытаюсь создать полный элемент для многократного использования, и я использую svg в качестве фонового изображения.Я буду использовать его, чтобы вкладывать такие вещи, как заголовки, формы или что-то действительно.
Идея состоит в том, что изображение всегда будет иметь ширину 100% от края до края экрана, повторяясь горизонтально и масштабируя, когда его содержимое заставляет элементчтобы расшириться в высоту.
Понял это далеко, но вот в чем проблема: Графика (https://imgur.com/a/SK3SxTi) имеет неровные верхний и нижний края. Я хочу, чтобы убедиться, что содержимое элементане заканчивается на внешней стороне заливки. Я подумал, что я просто установил бы верхний / нижний отступы элементов на 20% и назвал бы это днем, но это просто не работает, как я надеялся.
Я хочу, чтобы это «отступление» было постоянным на 20% от общей высоты элемента, независимо от того, насколько оно высокое или широкое.
.fullwidth {
width:100%;
background-image: url(graphic.svg);
background-repeat: repeat-x;
background-size: auto 100%;
padding:20% 0;
}
.content {
...
}
В результате есть заполнение, но оно не является постоянным.варьируется в зависимости от ширины экрана. Я пытался сделать все возможное, чтобы заставить его работать, но я просто не могу понять это самостоятельно.