<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.