How to add crosshatch pattern to header section

Hi Guys,

I'm back again! This time looking for a little help reference; http://www.onefootballforum.co.uk/index.php. We've been led to believe that it's possible to achieve a "crosshatch" or "diagonal lines" pattern over the logo/blue area in our header through CSS, similar to what can be seen here

https://pixelexit.com/

Code (markup):

.

I have had a play around myself but have only managed to achieve this in the body of the site as opposed to in the header. As many of you know my knowledge of CSS is effectively nil - so I'd be open to either A) help & guidance on how to learn to do this myself or B) or an offer to actually carry out the work for a reasonable fee.

Thank you in advance .

All the best,
WebDev

 

The way you'd probably do it with CSS3 is by using linear-gradient property and its derivatives. The problem with this property is that it's very unstable and should be avoided whenever possible.
If you crave diagonal stripes that much, just make a 10 by 10 image or so and background-repeat it. It's far more reliable, gives you more design possibilities and it degrades gracefully if you set a fallback background color.
That website you included uses a background image, not css3.