CSS Backgrounds on the body and html tags

December 22, 2006
Greg Ferrell

Today I decided to update the html of my main page to appear more like the code blog.

Mainly it was adding the background gradient to the top and some new JavaScript. The background CSS was a very simple effect using the html tag AND the body tag for displaying background images.

html {
	background-image: url("images/back.gif");
	background-repeat: repeat;
	background-color: #666;
}
body {
	margin:0;
	padding:0;
	background-image: url("images/back_gradient.png");
	background-repeat:repeat-x;
	text-align:center;
}

I of course assumed it would go very quickly and I just change, upload, and go. I should have known better.

When I was editing the html page, I noticed that I didn’t have a doctype. Being forced to use IE6 all day by the army, I had forgotten what good browsers do when a proper doctype is added. It broke my always-in-the-middle table hack.

There was a simple JavaScript fix I had planed on using anyway, so I decided to implement it. In order for it to work correctly I had to make the div container for the content absolutely positioned. When I did so, the top gradient for the body disappeared. I thought at first that it was a server side issue until I tried it locally with the same results.

I spent more than two hours looking with a friend for the problem. It didn’t come to me until after I implemented his suggestion of running a vanilla page with just the CSS.

When an object is absolutely positioned, it doesn’t push is parent container. As it was the only thing on the page, and the body counts as a container, there was nothing pushing the body open so that the background could be seen.

The simple solution is adding a height value to the body tag that is as high or higher than the background image.

body {
	height:400px;
	margin:0;
	padding:0;
	background-image: url("images/back_gradient.png");
	background-repeat:repeat-x;
	text-align:center;
}

The good thing is that it also validates! Enjoy.