it-swarm.com.de

hintergrundgröße: Cover funktioniert nicht auf Android-Tablets

Ich verwende die background-size-Eigenschaft für ein Hintergrundbild in voller Breite und Höhe, habe aber Probleme, in Chrome auf einem Nexus7-Tablet in der Hochformatansicht eine vollständige Abdeckung zu erzielen. Es deckt nur die Breite und nicht die Höhe ab, d. H., Es befindet sich ungefähr 200px des weißen Bereichs darunter. Wenn ich jedoch die Site in Desktop Chrome (oder irgendetwas anderem) und auf einem vertikalen Monitor zum Nachahmen von Porträtmaßen sehe, ist dies kein Problem.

Hat jemand eine Lösung?

CSS:

html { 
    background: url(/images/post_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')";
}

Portrait Screenshot:

47
maceyj2

Ich glaube, Sie können das Problem beheben, indem Sie die Höhe der HTML- und Body-Tags im CSS definieren.

html{
 height:100%;
 min-height:100%;
 }
body{
 min-height:100%;
 }

hoffe das hilft

94
ackushiw

Ich weiß, es ist lange her, seit die Frage gestellt wurde, aber ich habe gerade die Antwort gefunden, die ich denke. Für mich Hintergrundgröße: Cover funktioniert in Android Browser und Android Chrome, wenn Sie das "Feste" in der Hintergrund-CSS-Anweisung weglassen . Nach einigen Tests funktioniert es für mich, wenn das Bild zum Hintergrund eines DIV wird:

#yourDivSelectorHere { 
width: 100%;
height: 100%;  
position: fixed;
top: 0;
left: 0;
z-index: 0; 
background-image: url(/img/backgrounds/1.jpg) ;
background-repeat:no-repeat;
background-position: center center;
/* background-attachment: fixed; removed for Android */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

Das DIV ist selbst fixiert (im Gegensatz zum Hintergrundbild), hat eine Breite und Höhe von 100% und befindet sich hinter allem. Es ist ein wenig mehr Aufwand als nur das Hintergrundbild zu HTML oder BODY hinzuzufügen, aber für mich funktioniert es mit allen Browsern, die ich bisher getestet habe (FF, Chrome, IE8, IE9, Safari), auf iPad2 und Android Chrome und Android Browser.

29
Paolo Mioni

Ich werde die Lösung liefern, die ich für den Fall gefunden habe, dass jemand in der Zukunft darauf stößt. Anstelle eines Hintergrundbildes habe ich einen <img> verwendet:

HTML:

<img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade">

CSS:

#full_bg {
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 1024px;
    position: fixed;
    top: 0;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    #full_bg {
        left: 50%;
        margin-left: -512px;
    }
}

Dies funktionierte Cross-Browser und auf mobilen Geräten. Ich habe die Lösung hier gefunden.

6
maceyj2

Nun, ich kann mir eine andere Lösung einfallen lassen: Ich fügte sie dem Körper hinzu und alles, was Sie tun müssen, ist, dass der Hintergrund-Anhang: Die letzte Regel ist fixiert:

arbeitet:

body {
        height:100%;
        width:100%;
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center center;
        background-attachment:fixed;
}

funktioniert nicht:

body {
            height:100%;
            width:100%;
            background-size:cover;
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-position: center center;
}

Es ist wirklich schade, dass die Phonebrowser im Allgemeinen ein bisschen fehlerhaft sind ...

3

Verwenden Sie einen HTML-Hintergrund anstelle des Hauptteils und geben Sie eine "Höhe: 100%" an.

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

1
Seraph

Ich habe andere Lösungen mit etwas Jquery-Material gefunden. Das Update basiert auf der Annahme, dass wir ein Bild in Querformat/Proportion für den Hintergrund verwenden.

schritt 1: Vergleichen Sie die "Fensterhöhe" und "Seiteninhalt Höhe"

schritt 2: Wenn "Fensterhöhe" kleiner als "Seiteninhalt Höhe" ist

schritt 3: Wenden Sie dies auf das Body-Tag an

HTML{

<body style="background-size: auto 'page content height'; background-attachment: scroll;">

}

Skript

var wHeight = $(window).height();
    var bodyHeight = $('page-content-element').height();
    if(wHeight < bodyHeight){
        $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;');
    }
    else{
        $('body').removeAttr('style');
    }

nennen Sie dies beim Laden der Seite und der Fenstergröße

0