Throughout North America bugs burrow deep underground, waiting for the day they will emerge as one buzzing chorus to eat everything in their path. Millions of ravenous insects will swarm the skies and die in less than a month, leaving the earth for their descendants to return and wait for the cycle to begin anew.

This isn’t the plot of the next Pitch Black movie or Gears of War game, but reality: Magicicada are periodical cicadas that emerge on a 13 and 17 year cycle across the United States and Canada. The last breakout was on the east coast in 2013. The interesting question is why the repeated values of 13 and 17, and how are these numbers relevant to web pages?

The Prime Brood

You might recognize 13 and 17 as prime numbers, meaning they can only be divided by themselves and 1. Other primes include 2, 3, 5, 7, and 11.

One interesting aspect of prime numbers is that when repeated they are unlikely to coincide with another prime number cycle. Let’s take 3 and 7 as examples:

1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15

North American cicada populations evolved to emerge in prime number sequences sometime after the last Ice Age to avoid competing and interbreeding with each other. If they all matured at the same moment, billions of hungry short-lived insects could remove any local advantage they had gained for themselves, and collectively crash the environment.

Applying Primes To Backgrounds

How do we apply this insight to web development? By looking at design issues facing us today: the tiling of web page backgrounds. No matter how large you make an image background, the joined edges where the tile meets will show as a visual “seam” on any monitor that is large enough (and they are always getting larger).

The alternative is to either make single images full screen (a recent popular trend) or carefully manipulate an image in PhotoShop to “smooth” each edge with its opposite side, creating the appearance of an infinite, seamless tessellation.

Understanding primes – and the fact that CSS provides us with the ability to create gradients and use them as multiple background images – means that we could make several gradient “tiles”, using different prime values to create a colored portion, with the rest of each tile transparent. As you’ll see, the result is an easy-to-make, non-tiling, infinite background.

(Technically, it’s only important that the widths of each tile should only be prime with respect to each other. I’ll continue to use traditional prime numbers for this example).

Let’s say the first “tile” is 17 pixels wide. The gradient will go from left to right, starting off as solid color to halfway through the tile area, where it turns completely transparent. I’ll employ HSLA colors for ease-of-use:

div.prime {
	background: rgb(231,144,15);
	background-image: 
		linear-gradient(
			90deg, 
			hsla(255,100%,100%,.07) 50%, 
			transparent 50%
			);
	background-size: 17px;
}

Applied to an otherwise empty <div> with a class of prime and a set height, the repeating gradient will look like this:

Neat, but not terribly significant. Let’s make another gradient tile, with similar settings but 37 pixels wide (another prime number):

div.prime {
	background: rgb(231,144,15);
	background-image: linear-gradient(90deg, hsla(255,100%,100%,.17) 50%, transparent 50%);
	background-size: 37px;
}

The background is now:

Again, nice, but nothing special. Now let’s make things interesting, and apply both gradients to the element at the same time:

div.prime {
	background: rgb(231,144,15);
	background-image: linear-gradient(90deg, hsla(255,100%,100%,.07) 50%, transparent 50%),
	linear-gradient(90deg, hsla(255,100%,100%,.17) 50%, transparent 50%);
	background-size: 17px, 37px;
}

The result:

Now things are getting interesting. Being partially transparent, the gradients interweave with each other, but not in a completely predictable way. There’s still a little visual tiling, however. Let’s break that up by adding a third gradient:

div.prime {
	background: rgb(231,144,15);
	background-image: linear-gradient(
		90deg,
		hsla(255,100%,100%,.07) 50%,
		transparent 50%
		),
		linear-gradient(
			90deg,
			hsla(255,100%,100%,.17) 50%,
			transparent 50%
			),
	linear-gradient(
		90deg,
		transparent 50%, 
		rgba(255,255,255,.21) 50%
		);
	background-size: 17px, 37px, 53px;
}

Which results in:

As you can see, understanding prime numbers, gradients and multiple backgrounds allows you to create interesting, varied, and effectively infinite designs quite quickly, with no tiling. The process could be made simpler, however, however: in the next article, I show how to use Sass to auto-generate prime-number backgrounds.

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