web-dev-qa-db-fra.com

background-size: la couverture ne fonctionne pas en portrait sur une tablette Android

J'utilise la propriété background-size pour une image d'arrière-plan pleine largeur et hauteur, mais je ne parviens pas à la couvrir complètement dans Chrome sur une tablette Nexus7 en mode portrait. Il ne couvre que la largeur et non la hauteur, c’est-à-dire qu’il y a environ 200px d’espace blanc en dessous. Cependant, lorsque je visualise le site sur le bureau Chrome (ou sur toute autre chose) et sur un moniteur vertical pour émuler les dimensions de portrait, il ne couvre aucun problème.

Quelqu'un a une solution?

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 capture d'écran:

androidcss3google-chromecoverbackground-size
47
maceyj2

Je pense que vous pouvez résoudre ce problème en définissant la hauteur des balises html et body dans les CSS, comme suit:

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

j'espère que cela t'aides

94
ackushiw

Je sais que la question a été posée il y a longtemps, mais je pense que j'ai trouvé la réponse. Pour moi, background-size: cover fonctionne dans le navigateur Android et Android Chrome si vous omettez de "fixer" l'instruction CSS en arrière-plan . Après quelques tests, cela fonctionne pour moi en transformant l'image en arrière-plan d'un DIV:

#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;

}

La DIV est elle-même fixée en position (par opposition à l'image d'arrière-plan), elle est 100% largeur et hauteur et est placée à l'arrière de tout. C’est un petit effort supplémentaire au lieu d’ajouter l’image d’arrière-plan à HTML ou BODY, mais pour moi, cela fonctionne sur tous les navigateurs que j'ai testés jusqu'à présent (FF, Chrome, IE8, IE9, Safari), sur iPad2 et Android Chrome et navigateur Android.

29
Paolo Mioni

Je vais fournir la solution que j'ai trouvée au cas où quelqu'un se heurterait à cela à l'avenir. Au lieu d'utiliser une image de fond, j'ai utilisé un <img>:

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;
    }
}

Cela a fonctionné multi-navigateur et sur les appareils mobiles. J'ai trouvé la solution ici .

6
maceyj2

Eh bien, je peux proposer une autre solution:

travaux:

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

ne fonctionne pas:

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

C'est vraiment dommage que les brouteurs soient en général un peu buggés ...

3
BastianBalthasarBux

Utilisez l'arrière-plan HTML au lieu du corps et donnez une "hauteur: 100%"

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

J'ai trouvé une autre solution en utilisant un peu de choses jQuery. Le correctif est basé sur l'hypothèse que nous utilisons une image en dimension/proportion de paysage pour l'arrière-plan.

step1: comparer la "hauteur de la fenêtre" et la "hauteur du contenu de la page"

step2: si "hauteur de la fenêtre" est inférieure à "hauteur du contenu de la page"

step3: Appliquer ceci à la balise body

HTML{

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

}

script 

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');
    }

appelez ceci au chargement de la page et au redimensionnement de la fenêtre

0
Pons Purushothaman