Diagonal lines/texture overlay on background gradient/image - html

Question

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.
SOLUTION POSTED BELOW.

Answer 1

You can use multiple background images on the button, so you have your standard gradient with the stripy gradient on top tiled using background-size:
.stripy {
background-image:
linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent),
linear-gradient(bottom, rgb(83,84,84) 0%, rgb(181,181,181) 100%);
background-size:50px 50px, auto;
}
The stripes are a bit thick, but with a bit of experimentation it should be possible to get what you want.

Answer 2

A CORRECT SOLUTION:
jsFiddle: If you're not seeing the diagonal lines, it's because jsFiddle doesn't really like external links to hosted images from imgur. Just copy and paste the imgur url in another tap to get it in your cache, then reload the Fiddle.
The key to the solution is the relative positioning of the color background, and the absolute positioning of the texture/line overlay. For future visitors to this post, if you want to overlay a texture on an image, apply:
position:relative
...to your image div, and:
position:absolute
...to your overlay div.
<div id="alert">
Text goes here!
<div class="lines"></div>
</div>
#alert {
position:relative;
padding:10px;
box-shadow:0px 1px 1px #000, 0px 1px 1px #F5BFB1 inset;
background: #ea765a; /* Old browsers */
background: -moz-linear-gradient(top, #ea765a 0%, #d2583b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea765a), color-stop(100%,#d2583b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* IE10+ */
background: linear-gradient(to bottom, #ea765a 0%,#d2583b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea765a', endColorstr='#d2583b',GradientType=0 ); /* IE6-9 */
}
.lines {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background:url(../img/lines.png);
opacity:0.05;
}