Schalende fullscreen achtergrond en Android/WebView.

[ikt]

Hallo!

Ik heb een webpagina die ik mooi wil maken. Op een desktop wordt de achtergrond goed gerendert: de afbeelding wordt geresized op de hoogte of breedte, welke het grootst is, de rest zit buiten de window.

Op Android in op Chromium WebView gebaseerde browsers, echter, rendert de browser blijkbaar de hele lengte en schaalt de afbeelding daarop, waardoor alleen de top zichtbaar is.

De CSS:

Cascading Stylesheet:

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

Resultaten op verschillende browsers:
http://imgur.com/a/dfCOj

Hoe zorg ik ervoor dat dit er wel goed uit ziet op Android? Ik heb geen iApparaat of Windows Phone, enkel een Android telefoon. Ik heb wat rondgegoogled maar ik kan weinig vinden. Enkel Firefox Mobile schijnt het goed te doen.

[_Thanatos_]

Haal die `fixed` er eens af? Dat werkt nml niet goed op Android versie nogwat.nogwat.

(btw, mooie wallpaper van 5cm Per Second trouwens )

[ikt]

Dankje

Jammer genoeg is fixed nodig - dit deel werkt. De achtergrond moet namelijk statisch blijven terwijl de content scrolled. Het zit m vooral in background-size, waarschijnlijk.

Update:

Cascading Stylesheet:

    height: 100%;
    min-height: 100%;

Dit toevoegen aan de html selector werkt.

[ Voor 22% gewijzigd door ikt op 12-06-2014 01:14 ]