Dies ist eine statische Kopie unseres alten Forums. Es sind keine Interaktionen möglich.
This is a static copy of our old forum. Interactions are not possible.

Neo

Erfahrener Schreiberling

  • "Neo" is male
  • "Neo" started this thread

Posts: 322

Date of registration: Jul 24th 2005

Location: Hannover

Occupation: Informatik

1

Sunday, April 4th 2010, 2:46pm

CSS/HTML und Hintergrundbilder

Hallo Forum,

ich habe ein 1024px breites HTML Layout, welches mittig zentriert ist. Das Hintergrundbild soll eine genau bestimmte Position haben - das Problem dabei ist, dass es ca. 100px nach Links aus der Mitte herausragt. Ich habe probiert, dass Hintergrundbild in den body zu fixieren, also

Source code

 
1
2
3
4
5
6

body {
	background-image:url(../img/bg_logo.png);
	background-repeat:no-repeat;
	background-position:-10px 170px;
	background-attachment:fixed;
}


Der zugehörige HTML Code Ausschnitt (so ungefähr):

Source code

 
1
2
3

<body>
  <div id="wrapper" style="width:1024px; margin-left:auto; margin-right:auto">Lorem Ipsum</div>
</body>


Das Problem ist, dass das Hintergrundbild relativ zum mittigen DIV-Wrapper plaziert werden muss. Das geht aber nicht, da es dann nach links abgeschnitten wird, weil es ca. 100px größer ist, als der mittige DIV-Wrapper. Ich kann auch nicht das Stück vom Hintergrundbild, dass fehlt, irgendwo in das Body-Tag einsetzen, weil es sich dann nicht mehr mit dem DIV-Wrapper mit verschiebt.

Gibt es dafür überhaupt eine Lösung? Außer, dass ich den Mittigen Wrapper um 100px nach links vergrößern muss, aber dadurch einen 1224px DIV Wrapper habe, was ich aber vermeiden möchte?

Danke schonmal.
  • Send private message

XAX

Junior Schreiberling

  • "XAX" is male

Posts: 207

Date of registration: Dec 25th 2004

2

Sunday, April 4th 2010, 8:57pm

Eine Beispielseite würde es denke ich sehr erleichtern das Problem überhaupt nachzuvollziehen :)
  • Send private message

AlexL

Junior Schreiberling

  • "AlexL" is male

Posts: 222

Date of registration: Feb 10th 2008

Location: Walsrode

Occupation: Master Informatik

3

Sunday, April 4th 2010, 10:50pm

bild soll hinter zentriertem div... mach das bild zentriert? oder is das grad zu stumpf ;-)
  • Send private message

Bastian

Dies, das, einfach so verschiedene Dinge

Posts: 988

Date of registration: Sep 30th 2007

4

Monday, April 5th 2010, 9:27am

Das Bild im body-Element zu zentrieren geht so lange gut, bis das Browser-Fenster kleiner als 1024px in der Breite gezogen wird. Dann unterscheiden sich die Mittelpunkte von body und div, und das Hintergrundbild rutscht seitlich raus.

This post has been edited 1 times, last edit by "Bastian" (Apr 5th 2010, 9:27am)

  • Send private message

XAX

Junior Schreiberling

  • "XAX" is male

Posts: 207

Date of registration: Dec 25th 2004

5

Monday, April 5th 2010, 11:46am

Quoted from "Bastian"

Das Bild im body-Element zu zentrieren geht so lange gut, bis das Browser-Fenster kleiner als 1024px in der Breite gezogen wird. Dann unterscheiden sich die Mittelpunkte von body und div, und das Hintergrundbild rutscht seitlich raus.


Dann benutz im body "background-position:top center;" dann ist es auch zentriert falls die Seite kleiner als 1024px ist.
Anscheinend möchtest du das Bild aber auch noch um eine bestimmte Anzahl von Pixeln verschieben. Willst du das Bild 100px nach rechts verschieben, dann erweiter das Bild links um einen 200px breiten unsichtbaren (oder passend farbigen) Bereich.
  • Send private message

Bastian

Dies, das, einfach so verschiedene Dinge

Posts: 988

Date of registration: Sep 30th 2007

6

Monday, April 5th 2010, 11:51am

Klar, so bleibt das Hintergrundbild im Bezug auf den verkleinerten Anzeigebereich zentriert. Der Wrapper mit der festen Breite hängt aber rechts raus und die relative Anzeige zum Hintergrund verschiebt sich.
  • Send private message

XAX

Junior Schreiberling

  • "XAX" is male

Posts: 207

Date of registration: Dec 25th 2004

7

Monday, April 5th 2010, 12:35pm

Ok stimmt.
Du könntest noch probieren body min-width:1024px; zu setzen, ka ob das funktioniert.
Oder das Hintergrundbild in ein extra div packen.
  • Send private message