Bild verrutscht
Käsebrötchen
- browser
Sodale, ich bin grad ne Seite am designen und komme soweit auch gut voran. NUr hab ich da ein Problem, bei dem ich nicht weiß, woher es genau kommt und wie ihc es beheben kann.
Ich habe ein komplettes Hintergrundbild für die Seite:
body {
background-image:url("images/background.jpg");
background-position:top center;
background-repeat:repeat-y;
color: #FFFFFF;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
margin: 0 auto;
padding-left: 0px;
text-align: center;
height: 100%;
}
Und dann hab ich den Inhalt mit seinen ganzen verschiedenen ELementen in eine Überdiv gepackt. In dieser Div ist dann zB noch eine Div, in der sich der Header befindet:
div#bannerbuttons {
background-image:url("images/banner.jpg");
background-position:top center;
text-align: right;
margin: 0 auto;
height: 114px;
width: 798px;
padding-top: 218px;
padding-left: 39px;
padding-right: 39px;
}
Im IE ist alles prima. Im Firefox ist jedoch, je nachdem, wie groß man das Fenster hat, der Hintergrund um ca 1px verrutscht (könnte ich ja noch mit leben). Wenn man das Fenster dann aber kleiner macht, als das Headerbild ist, verschiebt sich das ganze.
Sieht folgendermaßen aus:
Klick :)
Wo kann man sich das komplette Werk ansehen?
Bei mir funktioniert der Link zu dem Bild nicht!?
Wenn du ein Bild haben möchtest, dass den ganzen Hintergrund ausfüllen sollte, versteh ich folgendes nicht:
background-position:top center;
background-repeat:repeat-y;
Wo kann man sich das komplette Werk ansehen?
Bei mir funktioniert der Link zu dem Bild nicht!?Wenn du ein Bild haben möchtest, dass den ganzen Hintergrund ausfüllen sollte, versteh ich folgendes nicht:
background-position:top center;
background-repeat:repeat-y;
>
Link sollte mittlerweile wieder gehen.
Das gecentere dient dazu, dass, auch wenn man eine größere oder kleinere Auflösung als 1280 (Breite des Bildes) \* 1024 hat, sich die Homepage in der Mitte des Bildschirms befindet.
Hi,
Im Firefox ist jedoch, je nachdem, wie groß man das Fenster hat, der Hintergrund um ca 1px verrutscht (könnte ich ja noch mit leben).
http://www.peterkroener.de/bug-im-firefox3-body-hintergrundbild-um-1pixel-verschoben/
Wenn man das Fenster dann aber kleiner macht, als das Headerbild ist, verschiebt sich das ganze.
Das laesst sich bei diesem Aufbau schlecht verhindern. Ein zentriertes Hintergrundbild schiebt sich bei zu wenig Platz einfach nach links und rechts raus - das Div-Element kann sich aber nicht rausschieben. Du koenntest es ueber absolute Positionierung und negativen Margin ebenfalls zentrieren, dann ahmt es diese Verhalten nach - dann wird aber sein Inhalt ggf. unerreichbar.
MfG ChrisB
danke chris, hatte dich anfangs übersehen :)
funktioniert! :)