Hintergrundbild

[Da Mu]

Hi, kann mir einer weiterhelfen....

Ich möchte mein Hintergrundbild an den Bildschirm anpassen lassen, das es immer den Bildschirm ausfüllt aber nicht verzerrt wird und ohne Scrollbalken...

ich finde nur so ein script:

html {
        background: url(background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Aber dies klappt NICHT bei Android geräten

[Matthias Apsel]

Hallo Da Mu,

html {
        background: url(background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Die Präfixe kannst du entsorgen.

Aber dies klappt NICHT bei Android geräten!

Welcher Browser?

Bis demnächst
Matthias

[Da Mu]

die Standart-Browser von verschiedenen Android Handys...Samsung Galaxy etc...sowohl Smartphones als auch Tablets

[Gunnar Bittersmann]

@@Da Mu

ich finde nur so ein script:

html {
        background: url(background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Nein, kein Script. Das ist eine Regel im Stylesheet. Mit Script hat das nichts zu tun. (CSS ist eine deklarative Sprache.)

Aber dies klappt NICHT bei Android geräten!

Wie du auf der von Matthias bereits verlinkten Seite sehen kannst – wenn du auf „Show all“ clickst – funktioniert background-size: cover im Android-Browser ab Version 3, mit Präfix als -webkit-background-size: cover (spätestens) ab Version 2.1.

Die Box des html-Elements ist aber kleiner als du denkst. Damit die sich auf volle Viewporthöhe ausdehnt, musst du noch height: 100% angeben.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Die Box des html-Elements ist aber kleiner als du denkst. Damit die sich auf volle Viewporthöhe ausdehnt, musst du noch height: 100% angeben.

Das war auch mein Gedanke. Aber sollten Angaben für entweder html oder body nicht ohnehin für den gesamten Viewport gelten? Ah, offensichtlich nicht für Bilder.

Bis demnächst
Matthias