Hintergrundbild einbinden unabhängig von der Auflösung

[WAY_KOW]

Hallo

Hier eifel-chalet.de ist ein Hintergrundbild eingebunden welches in jeder Auflösung den ganzen Bildschirm füllt.

Leider kann ich in dem Chaos Design das das CMS generiert hat nicht herausfinden wie es gelöst wurde.
ist dies nur einfach über width:100% gelöst oder gibt es hier noch einen anderen Trick?

 

[Asterixus]

Nein, das Hintergrundbild ist nur sehr groß. Bei ganz großen Auflösungen sieht man nur noch das Bild unten in der Mitte, die Seite oben links und der Rest ist das background-color, das hellblau ist.

 

[WAY_KOW]

Ich hab folgendes bei mir versucht:

-moz-background-size:100%; 
-webkit-background-size:100%; 
background-size:100%;

Für mich als Laie sieht das Ergebnis ganz gut aus.

Verbergen sich in dieser Anweisung NAchteile?

 

[Asterixus]

Ja, das Bild wird skaliert und kann bei großen Auflösungen vollkommen verpixelt sein.

 

[threadi]

Und der IE<=9 kann das noch nicht.

 

[WAY_KOW]

IE kleiner 9 interessiert mich eh nicht, der wird in absehbarer Zeit in Vergessenheit geraten.

Das Verpixeln ist bei Skalierung unvermeidbar. Allerdings wird dies vermutlich nur bei sehr großen Bildschirmen wirklich problematisch. Bei den anderen fällt dies auch bei hoher Auflösung nur wenig auf, sofern man ein ausreichend großes Hintergrundbild hinterlegt.

Eine andere Lösung als die von mir gewählte ist wohl nicht denkbar?

 

[ge_fabian]

IE kleiner 9 interessiert mich eh nicht, der wird in absehbarer Zeit in Vergessenheit geraten.

Das Verpixeln ist bei Skalierung unvermeidbar. Allerdings wird dies vermutlich nur bei sehr großen Bildschirmen wirklich problematisch. Bei den anderen fällt dies auch bei hoher Auflösung nur wenig auf, sofern man ein ausreichend großes Hintergrundbild hinterlegt.

Eine andere Lösung als die von mir gewählte ist wohl nicht denkbar?

Da wäre ich mir mal nicht sooo sicher ! Internet Explorer 6 Countdown | Death to IE 6 | IE6 Countdown
(ja die Seite ist von Microsoft)
IE6 Countdown to Death




ie7 -> The Internet Explorer 7 Countdown
ie8 -> The Internet Explorer 8 Countdown
ie9 -> The Internet Explorer 9 Countdown
ie10 -> The Internet Explorer 10 Countdown
(hahahahahaahhaahahahahahahaha)

 

[bdt600]

Eine weitere Lösung: Bildschirmfüllende Hintergrundgrafik

 

[Tronjer]

Warum kein einfaches background-size: cover?

 

[WAY_KOW]

Die Vorgabe meines Kunden lautet:

Lesbar und Verwendbar auf für ältere Browser, aber im wesentlich zukünftsfähiges Design.
Ob nun 10-15 % statt runde eckige Ecken haben oder das Hintergundbild sich nicht ausdehnt .... ist mir daher letzlich egal.

 

[Tronjer]

Die Vorgabe meines Kunden lautet:

Lesbar und Verwendbar auf für ältere Browser, aber im wesentlich zukünftsfähiges Design.
Ob nun 10-15 % statt runde eckige Ecken haben oder das Hintergundbild sich nicht ausdehnt .... ist mir daher letzlich egal.

Für den IE 7 sollte das background-image noch zusätzlich als src-image im HTML angelegt sein, und natürlich kennt dieser Browser kein CSS3.

Hinsichtlich CSS kannst du unterschiedliche Stylesheets über Conditional Comments aufrufen oder einfach Browserhacks verwenden. Für das HTML lässt sich der IE 7 mit $_SERVER['HTTP_USER_AGENT'] ermitteln und über eine if-Abfrage das src-image einbinden.

 

[threadi]

Der USER_AGENT kann manipuliert werden. Sicherer wäre es für den IE7 Conditional Comments oder den Star Hack ("*+html") zu verwenden.