“background-size: cover” ne couvre pas l'écran mobile

J'ai une photo en arrière-plan sur mon site à l'aide de background-size:cover. Il fonctionne pour la plupart, mais qui laisse un drôle de ~30px un espace blanc sur mon Galaxy S3 en mode portrait.

J'ai joint une capture d'écran. La 1px teal ligne est d'illustrer la totalité de l'écran. Semble que le fond s'arrête juste après les médias sociaux uls.

J'ai testé en enlevant le ul et l'arrière-plan de joint auto vers le bas de le slogan texte.

“background-size: cover” ne couvre pas l'écran mobile

Aussi, voici mon CSS concernant les mobiles portrait de vue:

@media only screen and (max-width: 480px) {

.logo {
    position: relative;
    background-size:70%;
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    -o-background-size: 70%;
    margin-top: 30px;
}   

h1 {
    margin-top: -25px;
    font-size: 21px;
    line-height: 21px;
    margin-bottom: 15px;
}

h2 {
    font-size: 35px;
    line-height: 35px;
}

.footer_mobile {
    display: block;
    margin-top: 20px;
    margin-bottom: 0px;
}

li {
    display: block;
    font-size: 1.3em;
}

Cette habitude de ne pas se produire, mais je suppose que j'ai accidentellement mis sur écoute, tout en essayant de résoudre un autre problème.

HTML, CSS pour l'image de fond?
Le CSS est " html { background: url(../images/bg.jpg) no-repeat top right fixe; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } '
Juste quelques suppositions: avez-vous essayé html { height: 100% }, ou essayé de fixer le fond de body au lieu de html?
html { height: 100%} résolu que, cependant, un nouveau problème se pose, maintenant en mode paysage est seulement la moitié du chemin couvert. N'hésitez pas à jeter un coup d'oeil.. vitaliyg.com

OriginalL'auteur Vitaliy G. | 2012-12-01

  1. 34

    Après des heures à essayer des choses différentes, en ajoutant min-height: 100%; au fond de html en vertu de la { background:... } a fonctionné pour moi.

    Merci pour l'astuce, de l'Art!
    Enfin, un problème de quelqu'un d'autre a passé des heures à essayer de résoudre, et j'ai le prêt-découvert réponse, en fait un changement! Merci beaucoup, travaillé un charme.
    Envisager d'ajouter 100vh de hauteur trop: stackoverflow.com/a/38532368/2418655
    merci pour économiser mon temps.

    OriginalL'auteur

  2. 4

    Cela fonctionne sur Android 4.1.2 et iOS 6.1.3 (iPhone 4) et des interrupteurs pour le bureau. Écrit pour les sites responsive.

    Juste au cas où, dans votre HTML tête, quelque chose comme ceci:

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    HTML:

    <div class="html-mobile-background"></div>

    CSS:

    html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%;
}

@media (min-width: 600px) {
    html {
        background: url(/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover;
    }
    .html-mobile-background {
        display: none;
    }
}

    OriginalL'auteur

  3. 1

    Galaxy S3 havs une largeur de plus de 480px soit en mode portrait ou paysage, donc je ne pense pas que ces règles CSS s'appliquent. Vous aurez besoin d'utiliser 720px.

    Essayez d'ajouter:

    * { background:transparent }

    à droite à la fin & déplacez votre html { background:... } CSS par la suite.

    De cette façon, vous pouvez voir si il ya un mobile de pied de div ou de tout autre élément que vous avez créé est, bloquant la vue.

    Aussi je voudrais essayer d'appliquer l'arrière-plan CSS pour le corps plutôt que le HTML. J'espère que vous obtenez plus de la réponse.

    Qui a couvert l'écran à mi-chemin. L'utilisateur ci-dessus a suggéré d'utiliser { height: 100% } sur l'élément html. Qui semble résoudre le problème, mais lorsque l'appareil est sous tension paysage, l'écran n'est que la moitié couvert, montrant blanche pour le reste. N'hésitez pas à consulter le problème en direct, si vous le pouvez. Peut-être que ce sera plus facile.
    J'ai essayer sur le site en direct, mais je n'ai pas de Galaxy S3. Pas de chance avec ma suggestion?
    Malheureusement pas. C'est ce que j'ai vu (c'est à partir de mon bureau--étrangement l'original problème que j'ai n'a pas pu être répliquées sur le bureau, même si même largeur/hauteur de l'a rencontré) i.imgur.com/uZh9q.png
    Merci encore pour votre édité suggestion. J'ai essayé de changer max-width: 480px de 720px et a ajouté que le code sur le fond de la requête de média. L'arrière-plan ne couvre toujours pas, d'attacher au fond de la des liens. Pas sûr de ce que je devrais être à la recherche pour.

    OriginalL'auteur

  4. 0

    Actuelle solution serait d'utiliser la fenêtre d'affichage de la hauteur (vh) pour indiquer la hauteur désirée. 100% n'a pas de travail pour Mobile de google Chrome. CSS:

    background-size: cover;
min-height: 100%;

    OriginalL'auteur