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!
Eine Webseite passt man nicht an Bildschirme an sondern an den Viewport. Das ist der Bereich den der Browser der Seite bereitstellt. Das sind seltenst wirklich die Maße einer Bildschirmauflösung, folglich passt man die Webseiten nicht daran an.
Aber um deine Frage zu beantworten: Hintergrundbilder kann man nicht anpassen. Sie werden 1:1 so angezeigt wie die Grafikdatei groß ist.
Das kann man allerdings umgehen: binde das Bild in einem img-Tag und nicht als Hintergrundbild ein. Diesen img-Tag kannst Du dann absolut im Hintergrund positionieren und mit „width: 100%;height: 100%;“ an den Viewport anpassen.
Man könnte, wenn ich mich nicht irre, auch das Bild per php Vergrößern/Verkleinern lassen oder eine Vektorgrafik benutzen
Ja, das erfordert jedoch das Auslesen der Auflösung per php - eine relativ unsichere Sache und wie oben schon gesagt braucht man aber den Viewport zur korrekten Darstellung. Den kann man per php imho nicht auslesen.
Hmm. Der Viewport ist halt meistens kleiner Als die Auflösung von daher dürfte das kein Problem sein. Wenn man die Grafik dann zentriert schneidet es halt die Ränder ab. Kommt halt drauf an was die Grafik darstellt. Wenn es nur ein Muster ist kann man das ja so machen.