How to rotate repeating text at a 45 degree angle that isn't visible outside the element

Question

I'm trying to just have a word or phrase be repeated at a 45 degree angle downwards at a very low transparency, and have it cut off by the edges of the element. Just wondering if this is possible without just making an image in another program.

Something like this:

Answer 1

You can use SVG to create the rotated text then apply it as background. You can easily control the size by adjusting the background-size value

html {
  min-height:100%;
  background: 
    url('data:image/svg+xml;utf8,<svg style="transform:rotate(45deg)" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>') 
    0 0/50px 50px; /* update the 50px 50px to control the size */
}

Consider pseudo element to have it above all the content:

body:before {
  content:"";
  position:absolute;
  inset:0;
  opacity:0.8;
  background: 
    url('data:image/svg+xml;utf8,<svg style="transform:rotate(45deg)" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Epuuc </text></svg>') 
    0 0/60px 60px;
}

body {
  position:relative;
  background:purple;
  min-height:200vh;
}