Как сделать фон на тексте

.dis {
  position: relative;
  padding: .4em 1em 1em;
}
.dis::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: .6em;
  left: 0; right: 1em;
  background-color: #e7e3ef;
  filter: url(#dis);
}

<p class="dis" contenteditable>Нужно сделать вот такой фон, но чтобы растягивался под высоту адекватно. Просто картинки разные грузить или можно что-то другое придумать?</p>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="dis">
    <feTurbulence type="turbulence" baseFrequency="0.15" numOctaves="13" result="turbulence"/>
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>