[CSS] Hintergund fixieren

krizzelfix

Commander
Registriert
Sep. 2005
Beiträge
2.626
Hallo allerseits,

ich bin grade dabei mein neues Layout für meine Hp umzusetzten. Ich wollte ein Hintergundbild fixieren und den Container mittig ausrichten. Nur irgendwie will das nicht so ganz.
HTML:
html, body {
	background-color: #fff;
	width: 100%;
	height:100%;
}
#outer {
	width: 1008px;
	margin: 0px auto;
	background-image: url('../images/background.jpg');
	background-repeat: no-repeat;
	background-attachment:fixed;
}
//index.html
<body>
		<div id="outer">
			<div id="main">
			</div>
		</div>
	</body>
So wird das Hintergrundbild nur halb dargestellt. Wenn ich die Background sachen in den body schreibe, wird das Bild komplett angezeigt und ist auch fixiert. Aber es ist nicht mittig ausgerichtet. Habe es schon mit background-position: 0px auto; probiert - leider ohne Erfolg.

Hoffe mir kann jemand helfen.

Grüße

tewes

//Nachtrag: Habs jetzt geschafft.
Lösung:
HTML:
html, body {
	background-color: #fff;
	width: 100%;
}
#outer {
	width: 1008px;
	margin: 0px auto;
	background-image: url('../images/background.jpg');
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position: top center;
}
 
Zuletzt bearbeitet:
Noch ein kleiner Tipp zur Ergänzung: Man kann diese Hintergrundeinstellungen auch in einer einzigen Zeile formulieren:
Code:
background: #fff url(../images/background.jpg) no-repeat fixed center top;

Hilfe bei solchen Fragen liefert übrigens immer die CSS-Referenz von SELFHTML.
 
Ja die Syntax kenne ich auch, finde es aber nicht so übersichtlich.
Und da alle in der Firma die lange Form benutzen ist es einheitlich.;)
 
Es gibt bei background-position kein "auto" ... um die Mitte zu erhalten, kannst du wahlweise "center" oder "50%" angeben. ;)
 
Oke, dann hätte ich doch mal in die Doku gucken sollen ;).
Bin da einfach von ausgegangen, da es beim margin auch gibt.
 
Das stört mich auch manchmal an CSS. Warum heißt es denn
Code:
background-color: transparent;
wenn man keinen Hintergrund haben will und an anderer Stelle wiederum
Code:
border: none;
Sowas Inkonsistentes! Das hätte man intuitiver gestalten können, da gebe ich tewes Recht.
 
Um dich weiter zu ärgern - da (X)HTML und CSS keine Programmiersprachen sind, kann man diese auch nicht programmieren. :D ;)
 
Trotzdem hat Prypjat irgendwo doch recht, denn wenn CSS konsquent währe müsste es heißt ja "background-color: 0;" heißen und nicht "background-color: transparent;"
CSS ist an manchen Stelle zu unkonsequent definiert (nicht programmiert :D )
 
@Adagio: jetzt ärger nich so viel Prypjat;)

@All: Kennt jemand ein Workaround womit man auch im IE 6 das Hintergundbild fixiert?
 
>> Weil es border: 0 heißt und nicht none

Ich habe bis jetzt auch immer border: none verwendet und ich glaube, dass ist so auch standardkonform.
a) Der CSS Validator hatte bis jetzt noch nie etwas an border: none auszusetzen und
b) steht in SELFHTML "none = kein Rahmen (bzw. unsichtbarer Rahmen)."
 
Zurück
Oben