web-dev-qa-db-fra.com

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

J'ai un arrière-plan photo sur mon site en utilisant background-size:cover. Cela fonctionne pour la plupart mais laisse un espace blanc étrange ~ 30px sur mon Galaxy S3 en mode portrait.

J'ai joint une capture d'écran. La ligne sarcelle 1px sert à illustrer l'ensemble de l'écran. Il semble que l'arrière-plan s'arrête juste après les médias sociaux uls.

J'ai testé cela en supprimant le ul et l'arrière-plan s'est attaché au bas du texte du slogan.

problem screenshot

En outre, voici mon CSS concernant la vue de portait mobile:

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

Cela ne se produisait pas auparavant, mais je suppose que je l'ai accidentellement mis sur écoute en essayant de résoudre un autre problème.

htmlbackgroundmedia-queriescss
16
Vitaliy G.

Après des heures à essayer différentes choses, ajouter min-height: 100%; au bas de html sous le { background:... } a fonctionné pour moi.

37
Vitaliy G.

Cela fonctionne sur Android 4.1.2 et iOS 6.1.3 (iPhone 4) et les commutateurs pour le bureau. Écrit pour les sites réactifs.

Juste au cas où, dans votre tête HTML, 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;
    }
}
4
bit-less

Le Galaxy S3 a une largeur supérieure à 480 pixels en mode portrait ou paysage, donc je ne pense pas que ces règles CSS s'appliqueront. Vous devrez utiliser 720px.

Essayez d'ajouter:

* { background:transparent }

à la fin et déplacez votre html { background:... } CSS après cela.

De cette façon, vous pouvez voir s'il y a une div mobile de pied de page ou tout autre élément que vous avez créé qui gêne la vue.

J'essaierais également d'appliquer le CSS d'arrière-plan au corps plutôt qu'au HTML. J'espère que vous vous rapprocherez de la réponse.

1
Francis Kim

La solution actuelle consisterait à utiliser la hauteur de la fenêtre d'affichage (vh) pour indiquer la hauteur souhaitée. 100% ne fonctionnait pas pour Mobile Chrome. CSS:

background-size: cover;
min-height: 100%;
0
Mika Vatanen