web-dev-qa-db-fra.com

Taille de l'arrière-plan CSS: remplacement de la couverture pour Mobile Safari

Bonjour, j'ai plusieurs divs sur ma page qui ont des images d'arrière-plan que je veux développer pour couvrir la totalité du div, ce qui peut à son tour être agrandi pour remplir la largeur de la fenêtre.

Il est évident que background-size: cover Se comporte de manière inattendue sur les appareils iOS. J'ai vu quelques exemples de solutions, mais je ne peux pas les faire fonctionner dans ma situation. Idéalement, je préférerais ne pas ajouter de balises <img> Supplémentaires au code HTML, mais si c'est le seul moyen, je le ferai.

Voici mon code:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section2 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section3 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}
<body>
  <div id="section1" class="section">
    ...
  </div>
  <div id="section2" class="section">
    ...
  </div>
  <div id="section3" class="section">
    ...
  </div>
</body>

La question qui se pose est de savoir comment obtenir que l’image d’arrière-plan recouvre complètement la section div, en tenant compte de la largeur variable du navigateur et de la hauteur variable du contenu de la div.

htmlcssmobile-safari
52
Josh

J'ai eu ce problème sur beaucoup de vues mobiles que j'ai récemment construites.

Ma solution reste un pur repli CSS

http://css-tricks.com/perfect-full-page-background-image/ en tant que méthode géniale, les deux dernières sont des solutions de rechange lorsque la couverture de CSS3 ne fonctionne pas.

[~ # ~] html [~ # ~] 

<img src="images/bg.jpg" id="bg" alt="">

[~ # ~] css [~ # ~] 

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}
13
Zone6

J'ai eu un problème similaire récemment et j'ai réalisé que ce n'était pas dû à background-size:cover mais background-attachment:fixed.

J'ai résolu le problème en utilisant une requête multimédia pour iPhone et en définissant background-attachment propriété à scroll.

Pour mon cas:

.cover {
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;

    @media (max-width: @iphone-screen) {
        background-attachment: scroll;
    }
}

Edit: le bloc de code est dans LESS et suppose une variable prédéfinie pour @iphone-screen. Merci pour la notification @ stephband .

140
mkubilayk

Également publié ici: "background-size: cover" ne couvre pas l'écran du mobile

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

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

<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;
    }
}
6
bit-less

Il existe des réponses sur le net qui tentent de résoudre ce problème, mais aucune d'entre elles ne fonctionnait correctement pour moi. Objectif: mettre une image de fond sur le body et avoir background-size: cover; travail mobile, sans requêtes multimédia, overflows, ou hacky z-index: -1;position: absolute; superpositions.

Voici ce que j'ai fait pour résoudre ce problème. Cela fonctionne sur Chrome sur Android même lorsque le tiroir du clavier est actif. Si quelqu'un souhaite tester un iPhone, ce serait cool:

body {
    background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
    background-size: cover;
    -webkit-background-size: cover; /* safari may need this */
}

Voici la magie. Traitez html comme un wrapper avec une hauteur appliquée par rapport à la fenêtre d'affichage réelle. Vous connaissez le tag responsive classique <meta name="viewport" content="width=device-width, initial-scale=1">? C'est pourquoi le vh est utilisé. De plus, à première vue, il semblerait que body devrait obtenir ces règles, et cela peut sembler correct ... jusqu'à un changement de hauteur comme lorsque le clavier s'ouvre.

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}
4
dhaupin
@media (max-width: @iphone-screen) {
  background-attachment:inherit;    
  background-size:cover;
  -webkit-background-size:cover;
}
0
Amit Nanda

Pour les versions Safari < 5.1 , la propriété css3 background-size ne fonctionne pas. Dans ce cas, vous avez besoin de webkit.

Donc, vous devez utiliser -webkit-background-size attribut pour spécifier la taille de fond .

Par conséquent, utilisez -webkit-background-size:cover.

Référence - versions de Safari utilisant webkit

0
Rajesh Paul

C'est le code correct de la taille de l'arrière-plan:

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

<style type="text/css">
html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* To compensate for mobile browser address bar space */
    background: url(YOUR BACKGROUND URL HERE) no-repeat; 
 center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 background-size: 100% 100%
}
</style>
0
supetcriss

J'ai trouvé ce qui suit sur le site Web de Stephen Gilbert - http://stephen.io/mediaqueries/ . Il inclut des périphériques supplémentaires et leurs orientations. Travaille pour moi!

Remarque: Si vous copiez le code de son site, vous voudrez le modifier pour créer des espaces supplémentaires, en fonction de l'éditeur que vous utilisez.

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
0
Mason