AN ACCURATE RESOLUTION:
jsFiddle: If the diagonal lines are not visible, it is likely due to jsFiddle's restrictions on external links to images hosted on imgur. Simply copy and paste the imgur URL in a new tab to store it in your cache, then refresh the Fiddle.
The crucial aspect of this solution lies in using relative positioning for the color background and absolute positioning for the texture/line overlay. To all future readers of this thread, remember that to superimpose a texture on an image, you should 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;
}