<div class="container">
  <svg class="bg">
      <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
    <rect fill="url(#Text)" stroke="black" width="100%" height="100%"/>
  <div class='content'>   
    Overlay your content.<br>
    The "height" of the SVG pattern is tied to the number of repetitions
    .11 = 10<br>
    .2 = 5<br>
    .25 = 4<br>
    .33 = 3<br>

* { 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;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.