web-dev-qa-db-fra.com

Utilisation de background-attachment: corrigé dans Safari sur l'iPad

Je cherche à recréer un effet similaire à l'application scientifique populaire. Fondamentalement, une grande image d'arrière-plan, puis une couche HTML/CSS en plus. Lorsque l'utilisateur fait défiler le contenu, la position d'arrière-plan de l'image doit rester en place et ne pas défiler.

Évidemment, dans un navigateur "normal", j'utiliserais background-attachment: fixed, mais cela ne semble pas fonctionner sur l'ipad. Je connais la position: fixe ne fonctionne pas comme vous pouvez vous y attendre selon les spécifications du safari - mais existe-t-il un moyen d'y parvenir?

cssipadhtml
15
chris_bcn

Vous pouvez utiliser ce code pour créer une couche d'arrière-plan fixe pour pirater ce problème.

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: url('xx.jpg');
    background-attachment: fixed;
}

Et met <div id="background_wrap"></div> en <body></body>

<body>
<div id="background_wrap"></div>
</body>
14
Angolao

Safari mobile redimensionne l'ensemble de votre site à sa taille de fenêtre, y compris l'image d'arrière-plan. Pour obtenir l'effet correct, utilisez la propriété CSS -webkit-background-size pour déclarer votre taille d'arrière-plan:

-webkit-background-size: 2650px 1440px;

(pointe du chapeau au commentateur Mac )

3
codewrangler

En développant la réponse d'Anlai ci-dessus, j'ai trouvé que la solution répétait mon image pendant que je faisais défiler plutôt que de la garder fixe. Si quelqu'un d'autre a eu ce problème, mon CSS pour l'ID background_wrap est le suivant:

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('../images/compressed/background-mobile.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}

Vous venez de changer la taille de l'arrière-plan et la pièce jointe pour rendre l'image statique.

2
lg365

Je pense que vous pouvez placer l'image d'arrière-plan dans un div et définir le z-index pour qu'il apparaisse derrière un autre contenu. Ensuite, vous pouvez utiliser javascript pour fixer la position du div qui contient l'image d'arrière-plan.

1
Alexander

Semblable à Ig365, j'ai trouvé que la solution d'Angolao provoque la répétition de l'image, en fonction des proportions de l'image; cependant, l'image d'Ig365 ne reproduit pas l'emplacement de background-fixed. Pour ce faire, ajoutez un background-position-x: 50%;. (Selon les dimensions de votre image, vous devrez peut-être également background-position-y: 50%.)

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    background-position-x: 50%;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('imageURL');
    background-repeat: no-repeat;
}
0
Andy

Je ne suis pas un profi, mais j'ai résolu ce problème en utilisant 'jquery. C'est assez simple) Voici le code:

        jQuery(window).scroll(function(){
                var fromtop = jQuery(window).scrollTop();
                jQuery(" your element ").css({"background-position-y": fromtop+"px"});
        });
0
John