Website Hintergrundbild in variabler Größe zur Bildschirmauflösung

[kingmar]

Hey Leute

Ich habe eine Frage bezüglich einer Website. Und zwar möchte ich ein Hintergrundbild auf einer HTML Seite postieren, welches eine maximale Auflösung von 1280 + 960 px hat.

Diese soll je nach Bildschirmauflösung des Besuchers angepasst werden bzw. so erscheinen, dass sie die komplette Seite der Page einnimmt.

Kann mir einer diesen Tipp geben, wie ich das umsetze?

Besten Dank!

 

[vitus37]

Hallo,

Vorab: Es macht keinen Sinn ein Bild nach der Auflösung des Bildschirmes anzupassen. Kaum ein Besucher wird seinen browser auf Vollbild gestellt haben ;)

Was du vermutlich meinst ist der Viewport.
Normal bindet man Hintergründe mit CSS ein, da du etwas designen möchtest.
Aber um es gleich zu sagen: Mit CSS kannst du das Bild nicht Variabel an den Viewport anpassen.

Es gibt jedoch eine andere Lösung, wenn auch unschön und semantisch eher inkorrekt.
Wenn du es tatsächlich so umsetzen möchtest, dann binde das Bild mit dem IMG-Tag ein, positioniere es durch position: fixed; und lege es mit z-index: 1; in den Hintergrund. Zudem Länge und Breite auf 100%. Den ganzen anderen Inhalt lagerst du über das Bild per z-index: 2;.

 

[prm]

Bildschirmfüllende Hintergrundgrafik