Frage von Tomzilla, 79

Wie kann ich in CSS das background-image so einstellen, dass es immer das ganze Browserfenster abdeckt?

Ich habe mit background-image und background-size in CSS alles versucht, bekomme das Hintergrundbild aber einfach nicht so hin, dass es immer das ganze Browserfenster abdeckt.

Die einzige "Lösung" die ich bisher habe ist, dass ich es mit background-size: 200%; einfach grösser mache. Aber so decke ich ja auch nicht alles ab. Und das kann auch nicht die Lösung sein.

Kann mir da vielleicht jemand helfen?

Wäre froh! Danke

Gruss Tomzilla

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von webflexer, 56
html { 
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Kommentar von Tomzilla ,

Wow... Vielen Dank!

Kannst du mir vielleicht noch in Kurzfassung und einfach erklären was was bedeutet? Möchtet drum laufen dazu lernen: . :)

Aber danke dir

Kommentar von webflexer ,

Klar...

background ist klar....hier wird das Bild angegeben, no repeat bedeutet das Bild soll nicht wiederholt werden sowohl in der x und auch in der y Achse. Fixed bedeutet es soll fest fixiert werden auch wenn man auf der Seite scrollen kann.

background-size: cover bedeutet folgendes. Das Bild soll das Seitenverhältnis beibehalten und so klein wie möglich angezeigt werden wobei immer der ganze Hintergrund abgedeckt werden soll.

Die Zusätze -webkit -moz und -o sind einfach Befehle für ältere Browser Versionen wie Firefox, Opera usw.

Kommentar von Tomzilla ,

Achsoo, dann ist cover also das ganze Geheimnis... Super vielen vielen Dank!

Kommentar von ACKtozz ,

Oh Gott, muss man das immer noch prefixen? ..

Kommentar von webflexer ,

Müssen tust du nichts...ist jedem selbst überlassen welche Browser er noch unterstützen möchte.

Kommentar von tWeuster ,

Nein muss du nicht!!! Das wird ständig weiter geschleppt, weil es niemand hinterfragt. Dabei bläht es nur den Code auf, vergrößert die css Datei und bringt absolut nichts mehr.

http://shouldiprefix.com/#background-image-options

Kommentar von medmonk ,

Dabei bläht es nur den Code auf, 

Die Paar »Zeilen« machen den Kohl nicht fetter, sofern für die Laufzeitumgebung nur komprimierte CSS eingebunden werden. Spagetticode versteht sich. ;-)  

Antwort
von ACKtozz, 38

Hallo :)

Ich hab das gerade mal nachgeguckt, hier bin ich fündig geworden: http://www.w3schools.com/css/css3_backgrounds.asp

Folgendes könnte dein Problem lösen:

html { 
background: url(bild.jpg) no-repeat center fixed;
background-size: cover;
}
Kommentar von Tomzilla ,

Super danke dir

Keine passende Antwort gefunden?

Fragen Sie die Community