Problem med bakgrund på sida

Tja

Jag har problem med en bakgrund till en sida jag gör. Bakgrunden till html elementet fungerar perfekt - när man förminskar viewport vertikalt så förblir nedersta kanten av bakgrunden för html där sidan slutar när man scrollar ner för att titta.

Men för bakgrunden på body - om man förminskar webbläsaren vertikalt så flyttas nedersta kanten av body uppåt, vilket man då ser om man scrollar ned. Även footern hamnar ett par pixlar ovanför den absoluta botten av sidan.

Varför??!

html, body {
	margin: 0; padding: 0; height: 100%;
	min-width: 782px;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #333;
}
html { background: url(../images/htmlBackground.png) repeat-x #D8EFD0 left top; }
body { background: url(../images/bodyBackground.png) repeat-y center top; }
#wrapper, #footer {
	margin: 0 auto;
	width: 782px;
}
#wrapper {
	min-height: 100%;
	background-color: white;
}
.floatcontainer:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html #wrapper {
	height: 100%;
}
#header {
	height: 151px;
	background:url(../images/header.png) no-repeat top left;
}
#header h1 {
	display: none;
}
#leftColumn, #rightColumn { padding-bottom: 50px; }
#leftColumn {
	float: left;
	margin-left: 35px;
	width: 380px;
}
#rightColumn {
	float: right;
	margin-right: 35px;
}

#footer {
	height: 50px;
	margin-top: -50px;
	background:url(../images/footer.png) top left no-repeat;
	display: table;
}
#footer #tableCell {
	display: table-cell; vertical-align: middle;
}
#footer ul {
	float: right;
	list-style: none;
	margin: 0; padding: 0;
	margin-right: 50px;
}
#footer ul li {
	float: left;
	margin: 5px;
	padding: 0;
}

Adress för den här nuvarande ip-adressen:
http://83.227.54.13/ulf/layout-1.html