How do I create a pattern overlay in CSS

I'm trying to create a header for my website but I'm having a bit of difficulty as I'm new to HTML and CSS. I want to create a banner with the same font and background as shown below. They consist of a certain colour with a pattern overlay at 44% opacity, which I'm not sure how to do.

I originally uploaded the header as an image, but I was told it's bad to use large images on websites as it make it longer to load. So I tried creating it via code. If anybody could please help replicate the header below, I'd greatly appreciate it. Thanks.

Link to my current HTML & CSS Code via Fiddle

Link to Banner I want to replicate