Background Align to Bottom

Normally it’s IE that doesn’t play nice, but this time its Firefox that has the issue. The problem comes when trying to align a background image to the bottom of the browser window.

Logic sort of says that the code below would be enough to fix the background to the bottom of the screen:

body {
	background-image:url(background.gif);
	background-position:left bottom;
	background-attachment: fixed;
	background-repeat:no-repeat;
}

However firefox doesn’t think of the body as 100% of the browser window, it thinks of it as the height of the pages content. So when the image is positioned at the bottom it will sit at the bottom of the content rather than the bottom of the window. The quickest fix for this is to add a bit of css that will make the height of the body be the height of the browser window, like this:

html, body {
	padding: 0;
	margin: 0;
	height: 100%;
}

Now the background image will sit fixed to the bottom of the browser window.