<div class="container">
  <svg class="bg">
    <defs>
      <pattern id="Text" x="0" y="0" width="1" height=".11">
        <text x="10" y="20" class='style-your-text-with-css'>
          A rect with a pattern of text
        </text>
      </pattern>
    </defs>
  
    <rect fill="url(#Text)" stroke="black" width="100%" height="100%"/>
  </svg>
  
  <div class='content'>   
    Overlay your content.<br>
    <br>
    The "height" of the SVG pattern is tied to the number of repetitions
    <br>
    <br>
    eg.<br>
    .11 = 10<br>
    .2 = 5<br>
    .25 = 4<br>
    .33 = 3<br>
  </div>
</div>

* { box-sizing: border-box; }

.container {
  margin: 10px;
  padding: 27px 20px;
  position: relative;
  width: 230px;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.content {
  background: rgba(120, 120, 120, .95);
  margin: 0 auto;
  min-height: 135px;
  padding: 10px;
}