Grafik verschiebt sich beim skalieren

[Voice]

Moin moin,

ich baue grad an einer homepage und beschäftige mich derzeit viel mit css.
Die website habe ich in 4 Bereiche aufgeteilt.
Oben mit großem h1 einen header
Links eine Navigation
Rechts den Inhaltsteil
Unten eine Fusszeile
Das ganze Konstrukt ist 800px groß und zentriert im Browserfenster.

Zwischen allen Bereichen habe ich etwas Platz, der mit einer kleinen, sich wiederholenden Grafik ausgefüllt wird. Links, oben und rechts funktioniert das wunderbar, aber sobald ich spezifische Werte für den Mittelteil angebe, verschiebt sich dieser beim Ändern der Bildschirmgröße (strg+Mausrad).
Siehe angehängte Bilder.

Code: Alles auswählen

div#Seite {
   background:url('pics/bild1.jpg') repeat-x;
       text-align: left;
       margin: 0 auto ;
       width: 800px;
       padding: 0;
       border: 2px ridge silver;
   }

#fl{   background:url(pics/bild1.jpg) repeat-y right top ;}

#fr{   background:url(pics/bild1.jpg) repeat-y left top ;}

#fx{   background:url(pics/bild1.jpg) repeat-x fixed 0 113px;}

#fy{   background:url(pics/bild1.jpg) repeat-y fixed 36.4% 0;}

#fe{   background:url(pics/bild1.jpg) no-repeat fixed 550px 113px;}

Es geht um das #fy Makro. Wie ihr seht habe ich schon mit "fixed" versucht. Habe auch schon %, em und px als Wert benutzt. Schon so viel mit position:absolute usw probiert, aber nichts hat geholfen.
Hoffe jemanden fällt etwas ein...

MfG Voice

[rainer]

Ich vermute mal vorsichtig das sich dieser Effekt nicht nur beim skalieren zeigen wird, sondern auch auf anderen Auflösungen oder beim ändern der Browsergrösse.

Was mir nun spontan als Lösung einfällt, wäre die neue CSS3 Lösung, border-image.

Würde mir das so vorstellen, diese zwischenräume die du hast, nicht mit margin oder padding(wie auch immer gelöst) darzustellen, sondern einen border anzugeben.

nehmen wir den Header mal her als Beispiel.
die grafik ist z.b. 30x30 px
dann schaut das Header CSS so ungefähr aus:

#header {
border-width: 30px;
border-image: url(dein_f.jpg) 30 30 30 30 repeat repeat;
......
}

das müsstest du dann für jeden containern an den richtigen Seiten machen.
hier noch ein Link dazu:
peterkroener.de/schoenes-neues-css-border-image/

Problem daran : mir fällt spontan kein sinnvolles Fallback für ältere Browser ein die CSS3 noch nicht unterstützen. Außer eine unschöne Lösung, die grafik einfach als Hintergrundgrafik über den gesamten Body kacheln zu lassen und damit leben das es bei verschiedenen auflösungen mal abgeschnitten ist, was sicher der fall sein wird.

lg rainer

[djheke]

Auch wenn deine CSS Angaben ein bissel dürftig sind und es zum Ratespiel wird.
Warum definierst du deine HG nicht im body bzw. in dein umspannen Div ?

#wrapper {
background:url(deinebild.gif) 0 0 #fff;
}

[djheke]

Habe mal deine Seite versucht nachzubauen und denke mal das du es so ungefähr möchtest
http://www.gipspferd.de/forumhilfe/background/

[Voice]

Wow danke für die beiden Antworten, das hat mir sehr geholfen!

border-image kannte ich noch gar nicht, das ne super sache. Werde das auf jeden Fall für weitere Projekte nutzen, aber hier ist das dann leider nicht abwärtskompatibel genug.

Vielen Dank auch an die Mühe von djheke. Das hat mein Problem fast komplett gelöst.
Kannst Du mir noch sagen, warum unter der Navi alles weiß ist? Bei mir wiederholt sich da das Bild als Hintergrund weiter.

Und wofür ist das:
* {
margin:0;
padding:0;
list-style:none;
}
am Anfang?

Danke schonmal
MfG Voice

[rainer]

damit werden alle universal selektoren auf null zurück gesetzt.

also z.b. haben damit alle selektoren wie <p> <img> <h1> und und und keinen padding und margin mehr. diese sollte man dann in den einzelnen tags selbst definieren. erlaubt somit ein feineres positionieren bzw. ausrichten von elementen und erspart einem die fehlersuche wenn mal etwas wo klebt wo man es eigentlich nicht haben möchte.
jeder browser hat für die einzelnen html tags eigene vorgaben wieviel padding und/oder margin vergeben werden.
also gleich mal alles auf null setzen dann schaltet man diesen automatismus vom browser ab.

weiters schaltet djheke gleich mal alle listenelemente aus "list-style:none".
ich vermute(ohne in den quelltext zu sehen;) ) er hat im beispiel die menü punkte mit einer unsortierten liste dargestellt und wollte keine bullets oder sonstiges.

[djheke]

Hallo,
hast du dir nicht die Grafik angesehen ? Wenn nicht hier nochmal der Link
[url]http://www.gipspferd.de/forumhilfe/background/bg_page.gif[/url}
Das, wass weiß erscheint ist transparent. So in etwa solltest du deine Grafik erstellen.

CSS Angabe background:url(deinedatei) no-repeat top center;

mfg

[djheke]

Quatsch, nicht no-repeat sondern repeat-y.
Sorry