Is there a way to replicate the following texture/fill using only CSS? I want to use the same kind of diagonal lines over top other containers with different background fills, so I'm hoping there might be a way to do it in CSS without having to create patterns and using them as images.

Any ideas how I might be able to do this? I'm guessing that it'll probably have to be something like this:

```
<div id="gradientFill">
  <div class="linePattern">
    <!-- Content goes here -->
  </div>
</div>

```

Is there a better solution? I don't want to run into problems with using alpha/transparency on the diagonal lines and then having the content be transparent as well.

![enter image description here](https://i.stack.imgur.com/qVmqz.png)

![enter image description here](https://i.stack.imgur.com/kinIU.png)

![enter image description here](https://i.stack.imgur.com/FUX1L.png)

**SOLUTION POSTED BELOW.**