CSS3 Background - Problem auf Android Browsern

Kinimod · 5. Oktober 2014

Hey,

Ich lasse auf dem Hintergrund eine Grafik anzeigen, welche auf dem PC korrekt wiedergegeben wird.
Jedoch auf jedem Browser auf einem Androidhandy wird es inkorrekt angezeigt:

Spoiler anzeigen

Auf iOS-fähigen Geräten wird alles korrekt angezeigt, nur auf dem Android ist es fehlerhaft.
Wenn Kontent auf der Seite ist, dann wird es im Grunde genauso angezeigt, nur dass die einzelnen Verschachtelungen höher sind.

Spoiler anzeigen

Folgender CSS Code:

Code

body {
    background-image: url(http://cp.i-love-dm.de/res/background.png);
    background-attachment:fixed;
    background-position: center;
    background-size: 100% 100%;
}

Wo könnte der Fehler liegen?
Danke im Voraus.

Grüße

//E1: Screenshot eingefügt
//E2: Screenshot eingefügt

maddin · 5. Oktober 2014

Ich kann zwar weder nen Anhang finden, noch das Bild im Code betrachten, aber:

CSS

background-size:cover;

Lässt das Hintergrund Bild automatisch an die Größe des Client anpassen, ohne das Bild selbst dabei zu strecken (was unter Umständen zu einem unschönen Ergebniss führt). Ich gehe mal davon aus dass das strecken bei dir das besagte Problem ist.

Kinimod · 5. Oktober 2014

Hatte vergessen, das Bild hochzuladen. Ist nun im ersten Post verlinkt.
Nun schaut es so aus:

Spoiler anzeigen

Kaliber · 5. Oktober 2014

Schreib das mal so:

Code

html { 
    background: url(http://cp.i-love-dm.de/res/background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

mfg.

Kinimod · 5. Oktober 2014

Nun schaut es so aus:

Spoiler anzeigen

jdm_driven · 5. Oktober 2014

wie sollte es denn überhaupt aussehen? mal so gefragt...

Kinimod · 5. Oktober 2014

Es sollte den gesamten Hintergrund füllen.

Das Merkwürdige ist, dass der Code im ersten Post bisher immer funktioniert hat.
Hatte schon die Idee, dass es an der Grafik liegt, aber mit jeder anderen Grafik verhält es sich ebenso.

jdm_driven · 5. Oktober 2014

okay soll es dabei gezerrt werden oder wie stellst du dir das vor?

Kinimod · 5. Oktober 2014

Nein, es soll halt so, wie auf dem PC angezeigt werden, was leider nicht so ist.

Zum Vergleich: Auf dem PC sieht es so aus:

Spoiler anzeigen

Der Hintergrund wird auf dem PC und auf dem iPhone korrekt ausgefüllt, auf den Androidbrowsern jedoch nicht.

Kaliber · 5. Oktober 2014

Zitat von Mr.Reese

Nun schaut es so aus:

Nimm mal meinen Code und lösch mal den <!DOCTYPE aus deiner Datei

mfg.

Kinimod · 5. Oktober 2014

Danke, habe das Duplikat garnicht bemerkt.^^

breadfish.de 12. März 2022