Comment fixer l'image d'arrière-plan à l'intérieur div
-
30-09-2019 - |
Question
J'ai découvert un problème assez étrange, que je pense que je sais comment expliquer; Je ne sais pas comment le résoudre!
J'ai une page avec un conteneur div # (un div avec 100% min-height (hauteur pour IE)) contenant un en-tête, une "page-content" et un pied de page. L'image de fond du conteneur div # est censé être fixe (pas de position fixe mais background-attachment: fixed
ce qui rend le suivi de l'image lorsque vous faites défiler).
Le problème est que lorsque l'attachement fixe est ajouté à la balise de fond en CSS, l'image de fond est maintenant placé à l'extérieur de la div.
Le CSS est la suivante: (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 chose !important
dans la première height:
est de faire IE ignorer cette hauteur-étiquette particulière. Cela est nécessaire si min-height: 100%
devrait fonctionner.
Quand j'ajoute ceci ...
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 de fond se déplace en dehors de la div. Permettez-moi de vous expliquer cela. La seule partie visible de l'image de fond est ce qui est encore à l'intérieur du <div id="container">
, mais une partie de l'image est déplacée en dehors de la div et est maintenant invisible
Pour résumer ...
Lorsque l'image d'arrière-plan est fixe, l'image de fond est en partie cachée, se déplaçant en dehors de la div. L'image se positionne en haut à droite de la fenêtre du navigateur , pas en haut à droite de la div.
Je espère que vous les gars peut me aider!
La solution
Ce comportement est en fait correcte. Tout fond qui est attachment: fixed
sera par rapport à la fenêtre, et non pas l'élément auquel il est appliqué. Ceci est en fait la base d'Eric Meyer Spiral complexe démo.
Autres conseils
Alors que vous ne pouvez pas avoir une position d'arrière-plan fixe dans un div, la solution la plus simple serait de créer une div la taille de votre image. Faire l'image l'arrière-plan, et le mettre à position:absolute
dans le coin supérieur droit de la div que vous voulez placer dans l'utilisation right:0px;top:0px
. Assurez-vous que la div parent est position:relative
ou il ne sera pas positionné tout à fait dans ce div.
Vous devriez essayer d'ajouter background-origin
propriété, peut-être la valeur border-box
résoudra ton problème. Aussi, vous pouvez définir background-size
, garder à l'esprit cover
et contain
sont pris en charge et très utile.