Adding a CSS Background to the Shimmer Child Theme for Genesis

I’m building a site right now that uses the Shimmer child theme for Genesis from Viva la Violette. The theme has a background of light-colored polka dots made from a very small tiled image. A background image that small is not going to cause performance issues, but I’m biased in favor of using CSS (or icon fonts, when appropriate) instead of images wherever I can.

Since I am not all that expert in CSS gradients, I looked around for a pattern to start from, and found a simple polka-dot example at Enjoy CSS. Then I tweaked the colors and the radii of the dots until I had something I liked. This was not an exact duplicate of the original pattern: I decided I liked the way it looked with two sizes of dots.

The Enjoy CSS generator provides code for a class called .gradient-pattern, but I wanted to apply the background to the body. This turned out to be fairly easy.

The original CSS for site body in Shimmer is as follows:

body {
	background: url(images/bg.png) #fff;
	color: #989797;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
}

If you want to use the background I created, change that to:

body {
	background: -webkit-radial-gradient(#f4f0f7 0, #f4f0f7 4%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 100%), -webkit-radial-gradient(#f4f0f7 0, #f4f0f7 4%, #f4f0f7 9%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
	background: -moz-radial-gradient(#f4f0f7 0, #f4f0f7 4%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 100%), -moz-radial-gradient(#f4f0f7 0, #f4f0f7 4%, #f4f0f7 9%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
	background: radial-gradient(#f4f0f7 0, #f4f0f7 4%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 100%), radial-gradient(#f4f0f7 0, #f4f0f7 4%, #f4f0f7 9%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
	background-position: 0 0, 30px 30px;
	-webkit-background-origin: padding-box;
	background-origin: padding-box;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-background-size: 60px 60px;
	background-size: 60px 60px;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-shadow: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	-webkit-transform: none;
	transform: none;
	-webkit-transform-origin: 50% 50% 0;
	transform-origin: 50% 50% 0;
	color: #989797;
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.625;
}

(Okay, so I increased the font size, which you don’t have to, but almost all theme designers make default fonts too small.)

Enjoy CSS is free, but you do need to log in with a social account in order to get the code after you’ve finished using the generator.

Stay tuned to see the new Shimmer-based site in my portfolio–launch date is less than a week away!