Dubbla bakgrundbilder

Hejsan, jag sitter och testar lite med att ha dubbla bakgrundsbilder på en sida.
Den ena bilden är en vanlig jpeg-bild, och den andra är en genomskinlig png-bild som jag lägger ovanpå den andra för att få en snygg effekt.
Trixet är att använda både html och body för att få dit två bakgrundsbilder, men det uppstår ett oväntat problem i både Firefox och Opera.
Bakgrundsbilden på body vill inte repetera sig över hela sidan när man scrollar.
Jag misstänker att det beror på att själva body-elementet är för litet och inte sträcker sig hela vägen ut till kanten.
Hur ska jag göra för att fixa detta? :)

Här är länk till sidan:
http://troxy.net/stuff/background.html

	html { height:100%; background-image:url('img/body_bg1.jpg'); }
	body { height:100%; background-image:url('img/body_bg2.png'); background-attachment:fixed; display:table; width:100%; }

Tack zcorpan, intressant lösning. :)
Jag tror att det fungerar som det ska nu.
Det känns väldigt experimentellt att byta display-egenskap på hela body-elementet.
Finns det någon logisk orsak till varför det löser problemet?

Troxy skrev:

Det känns väldigt experimentellt att byta display-egenskap på hela body-elementet.

Mer så än på en DIV? Varför isf? :)

Troxy skrev:

Finns det någon logisk orsak till varför det löser problemet?

Om du hade använt display:block hade du behövt använda min-height:100% på body istället för height, vilket hade löst problemet för y-axeln, men inte för x-axeln. En tabell blir lika bred som dess innehåll istället för att låta innehållet svämma över.

Du kan dock förmodligen fortfarande få bakgrunden att sluta "för tidigt" om du positionerar saker utanför body med position:absolute eller relative.