Comment fixer l'image d'arrière-plan à l'intérieur div

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!

Answer 1

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.

Answer 2

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.

Answer 3

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.