Sorry erst einmal, hatte nicht gesehen, dass du mit ids arbeitest. Mein Fehler. Also muss es folgendermaßen heißen.
<div id="footer_bg">
<div id="footer"> </div>
</div>
Aber das Stylesheet bedarf auch noch einiger Ausbesserungen. Erst einmal gehört vor "footer_bg" nun ein "#". Wenn du mit Klassen arbeitest, dann ein ".", solange es kein Standard-HTML-Element ist, wie zum Beispiel td.
Dein "footer_bg" sollte genauso breit sein wie die komplette Seite, also 100%, da die Breite sonst automatisch ermittelt wird und in deinem Fall nur die Breite des eingebetteten divs beträgt. text-align sollte zentriert sein. Außerdem und ganz wichtig ist, dass du erst den div von "page" schließt, da dieser nur eine Gesamtbreite von 996px zulässt. Dein footer muss außerhalb platziert sein.
<div id="page">
<!--Hier steht der restliche Content-->
</div>
<div id="footer_bg">
<div id="footer"> </div>
</div>
</body>
</html>
#footer {
position: fixed;
bottom: 0px;
background-image: url(images/footer.jpg);
width: 996px;
height: 54px;
}
#footer_bg {
background-image: url(images/bg_bottom.jpg);
height: 54px;
width: 100%;
background-repeat: repeat-x;
text-align: center;
}
Versuch es jetzt am besten nochmal ;) sollte soweit funktionieren dann.
MfG