如何在CSS中创建图案覆盖

Question

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

Answer 1

Here you have your fiddle updated: FIDDLE

I've fixed a few things in the html like tags not closed (your headers) and now the "container" contains the banner propely.

So now you just have to add a background image with the pattern you want and (as you did) play with the opacity value of your text.

#container {
    background-image:url(http://zimasolutions.com/Images/pattern.png);
    repeat:repeat;
}

Use the repeat option for the background image so you just need a little image.

I uploaded temporally the image pattern.png I have used as an example. I took the sample for the image you linked. In a few hours I may delete that image.

Edited: IF you want the pattern image OVER the text insteed of under it may be more complicated. You could absolute position a container over the banner but in this case you may need to change the image opacity with an image editor (like photoshop).