Comment corriger l'image d'arrière-plan à l'intérieur de la div
J'ai découvert un étrange problème, je pense que je sais comment l'expliquer; je ne sais pas comment régler le problème!
J'ai une page avec un div#container (un div avec 100% min-height (hauteur pour IE)) contenant un en-tête, une page "contenu" et un pied de page. L'image de fond de la div#container est censé être fixe (pas de position fixe, mais background-attachment: fixed
qui rend l'image suivre lorsque vous faites défiler).
Le problème, c'est que lorsque fixes pièce jointe est ajoutée à l'arrière-plan-tag dans le CSS, l'image de fond est maintenant positionné en dehors de la div.
Le CSS est comme suit: (sans background-attachment: fixed;
)
div#container {
position:relative;
width:900px;
margin:0 auto;
background-color: #ccffff;
background-image: url("pics/sign.jpg");
background-repeat: no-repeat;
background-position: right top;
height:auto !important;
height:100%;
min-height:100%;
}
margin:0 auto;
est au centre de la div et la !important
chose dans la première height:
est de faire IE ignorer cette hauteur-tag. Ceci est nécessaire si min-height: 100%
devrait fonctionner.
Quand j'ajoute ce...
div#container {
position:relative;
width:900px;
margin:0 auto;
background-color: #ccffff;
background-image: url("pics/sign.jpg");
background-attachment: fixed; //This is what is added to the code-sample
background-repeat: no-repeat;
background-position: right top;
height:auto !important;
height:100%;
min-height:100%;
}
...l'image d'arrière-plan est en mouvement en dehors de la div. Laissez-moi vous expliquer ceci: La seule partie visible de l'image de fond est ce qui est encore à l'intérieur de la <div id="container">
mais une partie de l'image a déménagé à l'extérieur de la div et est maintenant invisible.
Pour résumer...
Lorsque l'arrière-plan de l'image est fixe, l'image de fond est en partie caché, se déplaçant en dehors de la div. L'image est un positionnement haut à droite de la fenêtre du navigateur, pas vers le haut à droite de la div.
Espère que vous les gars peut m'aider!
OriginalL'auteur Latze | 2010-08-20
Vous devez vous connecter pour publier un commentaire.
Ce comportement est en fait correcte. Tout d'arrière-plan qui est
attachment: fixed
sera par rapport à la fenêtre d'affichage, pas à l'élément auquel elle est appliquée. C'est en fait la base de Eric Meyer Complexe Spirale démo.Non pas que j'ai trouvé. Désolé 🙁
Je voudrais également une solution à cette question. Je ne pense pas qu'il est de se demander pourquoi cela arrive, il demande comment réparer un défilement de l'image dans un div.
Et, actuellement, il n'y a aucun moyen de le faire. Cette réponse est la raison pour laquelle.
OriginalL'auteur Ryan Kinal
Alors que vous ne pouvez pas avoir un arrière-plan fixe position à l'intérieur d'un div, la solution la plus simple serait de créer un div de la taille de votre image. L'image en arrière-plan, et
position:absolute
dans le coin supérieur droit de la div vous le souhaitez placé dans l'aideright:0px;top:0px
. Assurez-vous que le div parent estposition:relative
ou ne pas être en position absolue à l'intérieur de cette div.OriginalL'auteur Matt Healey
Vous devriez essayer d'ajouter de la
background-origin
de la propriété, peut-être leborder-box
valeur permettra de résoudre votre problème. Vous pouvez aussi définirbackground-size
, gardez à l'espritcover
etcontain
sont pris en charge et très utile.OriginalL'auteur guillaume