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