I have a textured-looking background image that I would like to use in several elements. The texture starts looking weird as it repeats around the page.

I was hoping to find a solution that would randomly change the background-position from top, bottom, left, right, center. Is that possible with just CSS?

Here’s what I have so far:

h1, h2, h3, h4, h5, h6{
    background-image: url('/wp-content/uploads/texture-768x128-1b1b1e.png')!important;
    background-clip: text!important;
    color: transparent!important;
}

I have found a few articles that approximate what I am looking to do but, nothing directly.

• how to make background-image repeated with random position

• https://codepen.io/mykt0ngc0/pen/XWjgELa

• https://codepen.io/bencarmichael/pen/LVmbxx

Thanks in advance for your help!