✔ Problem mit Hintergrundbild - Umsetzung?

[splat]

Hi,

Ich würde für mein Layout gerne den Hintergrund benutzen wie er im Anhang zu finden ist.
Der Inhalt sollte sich immer zentriert befinden, egal wie groß das Browserfenster gerade ist.
Das ist soweit alles kein Problem.. und funktioniert auch soweit ganz gut:

body {
	background: url(bg.gif);
	background-repeat: repeat-xy;
	width: 100%;	
	height: 100%;
}

#page_container {
	width: 800px;
	margin: auto;
	height: 100%;
}

#content_border_l {
	width: 400px;
	background: url(bg_left_border.gif);
	background-repeat: repeat-y;
	background-position: right;
	float: left;
}

#content {
	width: 600px;
	background: url(bg_content.gif);
	background-repeat: repeat-xy;
	float: left;
}

#content_border_r {
	width: 100px;
	background: url(bg_right_border.gif);
	background-repeat: repeat-y;
	float: left;
}

Wie ihr sehen könnt ist die Seite (also Teil 2, 3 und 4) 800px breit.
Der Rest wird ausgefüllt mit bg.gif (1) welches 3x3px groß ist.

Das Problem ist jetzt folgendes: Es kann vorkommen, dass bei einigen Fenstergrößen die Rahmen rechts und links, nicht ganz mit dem restlichen Hintergrund bg.gif abschließen. Um das zu verdeutlichen habe ich mal das 3x3 große Gif auch hochgeladen.
Jetzt ist die Frage, wie könnte man so etwas vielleicht noch realisieren? Gibt es hierfür einen besseren Lösungsweg?

Gruß
Marc

 

[Maik]

Hi,

das DIV #content_border_l soll wohl 100, und nicht 400px breit sein, oder?

Und was meinst du nun mit:

Es kann vorkommen, dass bei einigen Fenstergrößen die Rahmen rechts und links, nicht ganz mit dem restlichen Hintergrund bg.gif abschließen.

?

Ich hab da irgendwie ein Verständigungs- bzw. Vorstellungsproblem. Gibt's evtl. einen Link zur Seite, um sich das Problem mal "live" betrachten zu können?

 

[splat]

Hallo Maik,

ja, du hast Recht.. das DIV #content_border_l ist 100px breit.
Live ansehen geht momentan leider schlecht.

aber habe mal etwas hochgeladen..
Das erste Bild ist die korrekte Darstellung.
Auf dem zweiten unmittelbar links von "left" kann man es sehen..
Hoffe man sieht den Unterschied.

Wahrscheinlich belasse ich das ganze erstmal so.... ist ja jetzt auch kein Weltuntergang

 

[Maik]

Hm, meinst du den einen Pixel, den der hellere Hintergrund auf "Bild 2" breiter ist?

Hast du schon mal versucht, die drei Grafiken (bg_left_border.gif, bg_content.gif, bg_right_border.gif) zu einem Hintergrundbild zu vereinen, und dieses im DIV #page_container einzusetzen?

 

[splat]

Ich meine den einen Pixel, der gleich links von "left" zu sehen ist... gleich links wo bg_left_border.gif anfängt. Wäre bg.gif (der 3x3px große Hintergrund) einfarbig, dann hätte man das Problem ja gar nicht. Aber diese diagonalen Linien im Hintergrundbild verursachen eben das Problem.
Normalerweise sollte der Hintergrund ja überall gleichmäßig sein...

Ich hatte auch schon die drei Grafiken zusammen und nur page_container als einziges Div. Das ändert daran aber auch nichts.

Kann man einem Hintergrund denn eine Position zuweisen?
So das der Hintergrund nicht links oben anfängt, sondern bspw. rechts? geht so etwas?

 

[Maik]

Neben den Hintergrundpositionen "left - right", "top - bottom" und "center" hast du auch die Möglichkeit, mit Pixelangaben zu arbeiten, und hier sind sogar negative Wertangaben möglich.

 

[splat]

Also wahrscheinlich klappt es jetzt so:

Ich muss einfach das Hintergrundbild bg.gif etwas verschieben..
Habe es jetzt zentriert und müsste es einfach einen px nach rechts oder links verschieben.. wie geht denn so etwas?

 

[Maik]

background-position: -1px 0; /* Hintergrundposition um einen Pixel nach links verschieben */

P.S. Seh gerade, dass wir zwei uns am selben Tag im Nov. 2003 im Forum registriert haben.

 

[splat]

So... jetzt funktioniert es....
Habe jetzt die background-position auf center.. So habe ich immer die selbe Fehlerhafte Darstellung (Verschiebung), egal bei welcher Fenstergröße, und das bg.gif habe ich einfach etwas abgeändert.. einfach die 3 verschiedenen Positionen der Pixel durchprobiert... und eine davon hat gepasst Man muss sich nur zu helfen wissen

hehe.. das ist ja ein Zufall
nur warst du seit dem um einiges aktiver im Forum, wie ich sehe

Vielen Dank für deine Hilfe!

Bis zum nächsten mal!
Marc