Bug Crazy

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

Background image, before layering

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