background-attachment: fixed on mobile

J'essaie de définir une image d'arrière-plan pour une application Web spn et j'ai besoin que l'arrière-plan soit corrigé (qu'il ne soit pas fait défiler avec le reste de la page).background-attachment: fixed on mobile

Ceci est le corps css:

body { 
    background-color: rgb(51, 102, 102); 
    background-image: url('../images/background.png'); 
    background-attachment: fixed; 
    background-position: center; 
    color: #eee; 
}

Safari dans l'IOS et Chrome sur les applications répéter l'arrière-plan au lieu de le fixer à un moment donné.

J'ai vu sur Internet qu'il a été désactivé sur mobile mais existe-t-il une solution?

Source

2016-12-16 Gil

background-repeat: no-repeat; 
background-position: center center;

Source

2016-12-16 19:01:24 oompahlumpa

Il existe d'autres options pour cela, mais c'est la seule qui a réellement fonctionné pour moi; et j'ai essayé à peu près tous.

Vous définissez la div juste en dessous de l'étiquette initiale. Ensuite, appliquez l'image au html dans la div. Donnez aussi l'attribut div et id (#background_wrap dans ce cas). ... J'ai essayé ceci sans appliquer le lien d'image réel dans le HTML et cela n'a jamais fonctionné correctement parce que vous devez toujours utiliser l'attribut "background-image:" pour appliquer l'image à l'arrière-plan dans css. L'astuce pour que cela fonctionne sur le périphérique mobile n'utilise aucun paramètre d'image d'arrière-plan. Ces valeurs étaient spécifiques à mon projet, mais elles fonctionnaient parfaitement pour que mon image d'arrière-plan fixe reste centrée et réactive pour les fenêtres mobiles et les fenêtres d'ordinateur plus grandes. Vous devrez peut-être modifier les valeurs un peu pour votre projet spécifique, mais ça vaut le coup d'essayer! J'espère que ça aide.

<body> 
    <div id="background_wrap"><img src="~/images/yourimage.png"/></div> 
</body>

Ensuite, appliquez ces paramètres dans le CSS.

#background_wrap { 
margin-left: auto; 
margin-right: auto; 
} 
    #background_wrap img { 
     z-index: -1; 
     position: fixed; 
     padding-top: 4.7em; 
     padding-left: 10%; 
     width: 90%; 
    }

Source

2017-04-12 04:36:40

background-attachment: fixed on mobile

Répondre

Questions connexes