taille d’arrière-plan: la couverture ne fonctionne pas en portrait sur une tablette Android

Je pense que vous pouvez y remédier en définissant la hauteur des balises html et body dans le CSS, comme ceci:

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

J’espère que cela t’aides

Je sais que la question a été posée depuis longtemps, mais je viens de trouver la réponse, à mon avis. Pour moi taille de fond: la couverture fonctionne dans le navigateur Android et Android Chrome si vous omettez le “fixe” dans l’instruction CSS en arrière-plan. Après quelques tests, cela fonctionne pour moi en faisant de l’image le fond d’une 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; 

}

Le DIV est lui-même fixé (par opposition à l’image de fond), est à 100% de largeur et de hauteur et est placé à l’arrière de tout. C’est un petit effort supplémentaire au lieu de simplement append l’image de fond à HTML ou BODY, mais pour moi cela fonctionne sur tous les navigateurs que j’ai testés jusqu’ici (FF, Chrome, IE8, IE9, Safari), sur iPad2 et Android Chrome et Navigateur Android.

Je fournirai la solution que j’ai trouvée au cas où quelqu’un se lancerait dans le futur. Au lieu d’utiliser une image d’arrière-plan, j’ai utilisé un :

HTML:

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é entre les navigateurs et sur les appareils mobiles. J’ai trouvé la solution ici .

Eh bien, je peux proposer une autre solution: je l’ai ajouté au corps et tout ce dont vous avez besoin est que l’attachement en arrière-plan: corrigé est la dernière règle:

travaux:

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

travaille 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 navigateurs soient en général un peu bogués …

Utilisez le fond 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; } 

J’ai trouvé une autre solution en utilisant un peu de jquery. Le correctif repose sur l’hypothèse que nous utilisons une image en dimension / proportion du 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: Appliquez ceci à la balise body

HTML {

}

scénario

 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 sur le chargement de la page et le redimensionnement de la fenêtre