Background Blending

Titlebar with background-blend-mode and mix-blend-mode effects.

by Jon Fuller

HTML

<div class="l-titlebar">
	<div class="l-titlebar-img"></div>
	<h1>Weekend Specials</h1>
</div>

CSS

.l-titlebar {
	background-image: url(http://garysupullit.com/wp-content/uploads/2016/01/halftone-offwhite.gif);
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #ef5350;
	position: relative;
}

.l-titlebar-img {
	background-color: #ef5350;
	background-blend-mode: multiply;
	mix-blend-mode: screen;	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(https://freshysites.com/wp-content/uploads/2016/10/garysupullit_portfolio.jpg);
	background-position: center center;
	background-size: cover;
}

/* style the titlebar text */
.l-titlebar h1 {
	font-weight: bolder !important;
	color: white;
	font-family: sans-serif;
	padding: 30px;
}