Mit CSS Background fixieren

[Marcs]

Hallo,

Ich habe folgendes Problemchen und habe bisher nichts schlaues im Netz gefunden.
Ich möchte eine Hintergrundgrafik so plazieren, damit diese zentriert ausgerichtet auch bei verkleinern des Browserfensters zentriert bleibt.

Wie stelle ich das an?

Aktueller Code:
CODE margin-top: 0px;
background-image: url(xyz.xyz/xyz.xyz);
background-repeat: no-repeat;
background-position: top center;
background-attachment:fixed;


Hier noch mein Ziel (ist nur ein schnell-schnell Konzept.. noch nicht fertig): http://unaxus.com/files/extranet/marc/unx_studie2.png

Danke für jeden Tipp

 

[chricke]

Versuch mal

left: 50%;
margin-left: - (hälfte der bildbreite);

Edit:
Ich sehe gerade das du insgesamt zentrieren willst, also auch horizontal UND vertikal - sollte nach dem Schema aber in beide Richtungen gehen.

 

[Marcs]

QUOTE (chricke @ So 25.10.2009, 14:49) Versuch mal

left: 50%;
margin-left: - (hälfte der bildbreite);

Edit:
Ich sehe gerade das du insgesamt zentrieren willst, also auch horizontal UND vertikal - sollte nach dem Schema aber in beide Richtungen gehen.

Ups, hab meinen Fehler gesehen.. (habe da versehentlich ein padding reingesetzt).

Mein Hauptproblem ist, dass wenn ich das Fenster in der Höhe zentriere das Bild oben und unten gleichzeitig "wandert".
Wie kann man das beheben? Fixed sollte doch genau das verhindern.. oder?

Ps. Mein erstes Mal, dass ich ein Background Image plaziere... bisher habe ich immer ohne gearbeitet

..

 

[chricke]

Ohne jetzt nachgeschaut zu haben... aber ist background-attachment nicht für sowas wie "mitscrollende" banner? also das ein bild auch beim scrollen der seite an der relativen position innerhalb des angezeigten bereiches bleibt? Ich glaube das ist nicht was du brauchst...

Nimm mal folgendes (Bild am oberen Rand, horizontal mittig):

margin-top: 0px;
background-image: url(xyz.xyz/xyz.xyz);
background-repeat: no-repeat;
left: 50%;
margin-left: -(hälfte des bildes)px;

oder falls du es auch in die andere Richtung zentriert haben willst (horizontal und vertikal zentriert):
background-image: url(xyz.xyz/xyz.xyz);
background-repeat: no-repeat;
top: 50%;
margin-top: -(hälfte des Bildes)px;
left: 50%;
margin-left: -(hälfte des bildes)px;

In beiden Fällen noch eventuelle Paddings entfernen.

 

[Marcs]

Danke, werde das mal ausprobieren

.