CODEWITHSUNDEEP
htmlcssdesign-patternsheaderoverlay
Ian Lylak
Ian Lylak

Reputation: 3

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

Upvotes: 0

Views: 5241

Answers (1)

Alvaro Menéndez
Alvaro Menéndez

Reputation: 9012

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).

Upvotes: 1

Related Questions