Thema: CSS: Hintergrundgrafik im 'Hauptfenster' ausrichten?!

Moin.

Meine Hintergrundgrafik (ein einzelnes grosses Bild) zentriert sich in der Mitte des Bildschirmes.
Sie soll sich aber horizontal in der Mitte des fensters mit dem Hauptinhalt (Ihr wisst schon was ich meine) zentrieren und einen festen Abstandzum oberen Rand dessen haben.

Code:

#content650 {
float:left;
width:650px;
overflow:hidden;
background:#ffffff url(/templates/standard/images/background.jpg) no-repeat fixed center;
}

Wie muss ich da was ändern?
Als Anfänger bin ich für jeden Hinweis dankbar.

Grüsse,

C.

Code:

body {
background:url(../images/bg.jpg) no-repeat  center top #000000;
background-position:30px 20px;
}

Musst damit mal etwas spielen.
Mehr Infos findest du hier: http://de.selfhtml.org/css/eigenscha...round_position



Axel

Sorry, wenn ich dazwischenfunke, aber die Syntax von Axels Code ist nicht ganz richtig . Entweder kommen alle Eigenschaften auf die gleiche Zeile (dann verwendet man "background"):

Code:

body {
background: #ffffff url(../images/bg.jpg) no-repeat 50px center;
}

oder jede Eigenschaft wird explizit definiert, dann müsste es so aussehen:

Code:

body {
	background-color: #ffffff;
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-position: 50px center;
}

Deswegen schrieb ich ja auch "musst mit rumspielen". Aber du hast recht, ich hätte es vielleicht deutlicher schreiben müssen


Axel

Einfach diese Zeile einfügen:

Code:

background-attachment: fixed;

@Axel
Ich habe es nur deshalb hervorgehoben, weil für jemanden, der sich mit CSS nicht gut auskennt, so ein "Flüchtigkeitsfehler" zu einer harten Nuss werden kann

Zitat von anka

Einfach diese Zeile einfügen:

Code:

background-attachment: fixed;

@Axel
Ich habe es nur deshalb hervorgehoben, weil für jemanden, der sich mit CSS nicht gut auskennt, so ein "Flüchtigkeitsfehler" zu einer harten Nuss werden kann

Hast ja Recht -


Axel

Hallo Zusammen

Ich habe eine Frage zum Thema. Auch ich könnte durch anka's Code mein Hintergrund platzieren.

Es ist nun horizontal gesehen in der Mitte zentriert.
Aber offenbar betrifft das auch die vertikale.
Leider sehe ich den oberen Teil des Hintergrundbildes nicht. Es ist nur der untere Teil dargestellt.

Wie lautet denn der CSS-Code wenn der oberste Teil des Bildes auch zuoberst beginnen soll? Also vertikal gesehen, meine ich.
Ich hoffe ihr versteht was ich meine.

Edit: Habs Herausgefunden. Mit dem Wert "top".

body {
background-position: center top;
}

Gruss Spoiler