Css 元素填充顶部/底部占当前高度的百分比

我正在尝试为多种用途制作一个完整的宽元素，并使用svg作为背景图形。我会用它来嵌套一些东西，比如标题、表单或者其他任何东西

其理念是，图形将始终保持100%宽的屏幕边缘到边缘，当其内容迫使元素以高角度展开时，水平重复并缩放

到目前为止，我们已经解决了这个问题：图形（）的顶部和底部边缘不平。我想要的是确保元素的内容不会最终出现在填充的外部。我原以为我会将元素padding top/bottom设置为20%并结束，但它根本没有像我希望的那样工作

我希望这个“填充”是元素总高度的20%，无论它有多高或多宽

.fullwidth {
width:100%;
background-image: url(graphic.svg);
background-repeat: repeat-x;
background-size: auto 100%;
padding:20% 0;
}

.content {
...
}

结果是有一个填充，但它不是常数。相反，它随屏幕的宽度而变化。我已经尝试了各种各样的方法来让它发挥作用，但我自己却无法解决这个问题