배경이미지에 패턴오버레이 입히기

먼저 Patternify에 가서 패턴을 생성한 후 PNG 이미지를 다운로드합니다.

http://www.patternify.com/

오버레이를 적용하고자하는 Element의 before: 섹션에 다음의 CSS를 삽입합니다.

content: "";
background: url('/wp-content/uploads/2017/05/tex2.png') repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 2;

이때 적용대상이 되는 요소의 layout position은 relative로 설정해야 합니다.

만약 컬러를 삽입하고 싶다면 아래의 CSS를 응용하여 적용합니다.

content: "";
background: url('/wp-content/uploads/2017/05/tex2.png') repeat, rgba(189, 105, 130,0.3);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 2;

이 포스팅의 아래의 글을 참고하여 포스팅 되었습니다.

Overlay Your Images With A Pattern Or translucent Color