There’s no background-opacity control in CSS yet, but there’s an easy way to fake it, by using multiple background images. The trick is to manipulate the fact that the background-image property will also take a CSS color… which includes rgba.

A “washed out” background can be used to enhance the contrast between text and the image behind it. Naturally, you can reduce the opacity of the image by processing it in PhotoShop, but that usually takes repeated back-and-forth experimentation between the browser and graphics application, whereas writing the visual changes in CSS is far more direct and efficient.

The order of backgrounds in a multiple background declaration is from front to back, so we specify the composite photograph (from work by Thomas Shahan) last in the banner for the fictional entomologist blog Bug Crazy:

h1 {
	font-family: Calluna Sans, Arial, sans-serif;
	color: #fff; margin-top: 0;
	background: linear-gradient(rgba(0,0,0,0.5),
	 rgba(0,0,0,0.5)),
	  url('bugs.jpg');
	font-size: 5rem; padding: 2rem;
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	word-spacing: 5rem;
}

Applied to:

<h1>Bug Crazy</h1>

That produces the result you see at the top of the page; changing the “darkness” of the background image is simply a matter of raising the last value (alpha) in the rgba color value for the background image layer.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.