In previous articles I’ve shown how to make gradient backgrounds with CSS, no images required. I’ve also demonstrated how to make more complex visual effects by using CSS’s multiple backgrounds feature to layer gradients on top of each other.

Today, I’m going to take things a step further: if we add images to a background, and if the gradients we add have areas of transparency or opacity, we’ll see portions of the image through the gradient, producing a "pop-art" effect.

The most important point in writing the style rules is that the image must be added last: remember, in CSS background layers are added in reverse order, so when we specify our image at the end of the background effects, it appears to be on the bottom, with the gradients layered on top.

Checkerboard

For example, to create a checkerboard gradient effect, the CSS would be:

html, body {
	min-height: 100%;
	margin: 0;
} 
body {
	background-image:
	linear-gradient(45deg, #000 25%, transparent 25%),
	linear-gradient(-45deg, #000 25%, transparent 25%),
	linear-gradient(45deg, transparent 75%, #000 75%),
	linear-gradient(-45deg, transparent 75%, #000 75%),
	url(grace-kelly.jpg);
	background-size: 
		200px 200px, 200px 200px, 200px 200px, 200px 200px, cover;
	background-position:
		0 0, 100px 0, 99px -101px, 0 100px, 0 0;
}

Note that if we add a feature of a different size, we must repeat background-size for all elements. Also note that there is currently a known rendering bug in Safari, Chrome and Firefox that leaves a very faint diagonal mark in some boxes. The slightly-off values in background-position above are an attempt to minimize that, but they may still appear.

Hypnotic Circles

We could also create a repeating radial gradient layered on top of a background image:

html, body {
	min-height: 100%;
	margin: 0;
}
body {
	background: 
		repeating-radial-gradient(rgba(0,0,0,0.3), 
		rgba(0,0,0,0.3) 5%, transparent 5%, transparent 10%),
		url(ava-gardner.jpg);
		background-position: -20px 20px, 0 0;
		background-repeat: no-repeat, no-repeat;
		background-size: cover;
}

Polka Dot Pop Art

We could also create a repeating radial gradient layered on top of a background image:

body {
	background:
	radial-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 46%),
	radial-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 46%), 
	url(gilda.jpg);
	background-position: 0 0, 80px 80px;
	background-size:160px 160px, 160px 160px, cover;
}

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