The first task is to tweak the background of Amanda's
Nexus5 template to this striking concrete background, that Mike Matas uses in his
blog.
Now Mike is using a trick to emphasize the blog header. The top of the background image is slightly lighter and therefore subtely enhancing the blog title. How does he do that?
At first his solution appears to be quite quite normal. By using a normal background "repeat" variable in the CSS, the image is "tiled" and therefore covering all background surface of the page.
The clever part is to "center" and "top" the starting point. And then an additional CSS layer is superposing on top of the normal background. In his case, for the basic background declaration he uses a CSS "html" definition, quite unusual, but it works. On top of which is the "body" layer. Here Mike set the image to "no-repeat". Without any further declarations, the space of the body which is wider and longer than the image would appear as in a white colour or whichever background colour is defined. So to undo this, Mike declares the "body-background" "transparent".
html {
background: #fff url(files/bg2.jpg) repeat scroll center top;
}
body {
background: transparent url(files/bg.jpg) no-repeat scroll center top;
font-family: "Helvetica Neue", Helvetica, Arial, sans;
line-height: 18px;
} Mike Matas background CSS trick
So at first we are simply tiling a concrete background image.