[Resolu] Problème de background-attachment

Bonjour tout le monde

Je suis en train de refaire un site internet en virant les "frames".

Pour cela j'utilise le modèle de gabarit N°3.

Dans les "DIV" (#header,#centre et #gauche) j'utilise une image de fond.

Le contenu du "DIV" #centre étant plus grand, j'ai ajouté "overflow:auto". Ne voulant pas que l'image de fond ne bouge, j'ai ajouté "background-attachment:fixed".

Le problème c'est que avec Firefox, l'image de fond est décalée.

Si j'enlève "background-attachment:fixed", tout fonctionne bien pour
Firefox, mais le fond bouge sous IE.

Existe-t'il une alternative qui fonctionne avec Firefox et IE?

Je vous remercie d'avance.
Modifié par alpha (27 Oct 2006 - 08:08)

Salut alpha et bienvenu,

Petite question : pourquoi ne redimensionnes-tu pas directement ton image pour qu'elle correspnde à la taille voulu ?

Bonjour cygnus

Le problème ne vient pas de l'image de fond qui à la taille exacte du "DIV".

C'est le contenu texte et images qui est plus grand que le "DIV", c'est pour cette raison que j'ai ajouté "overflow:auto" pour faire défiler la page et "background-attachment:fixed" pour que l'image de fond ne bouge pas et corresponde aux autres images de fond des "DIV" #header et #gauche.

l'image décalée : ca veut dire quoi exactement ?

As tu joué avec les marges et les padding ?

T'es tu basé sur le modèe de boite IE ??

Pour positionner une propriété "que pour" IE tu peux, en général employer
propriété:yyyyy; (vu par tous)
_propriété: xxxxx; (remplace pour IE)

Donc tu pourras repositionner ton fond où tu souhaites.

Enfin si j'ai bien compris le pb.

Modifié par elz64 (24 Oct 2006 - 19:37)

Bonsoir elz64

Voici un lien pour vous montrer ce que ca donne : http://synthese.free.fr/test.htm

l'affichage est bon sous IE, mais l'image de fond du "DIV" #centre est décalée avec Firefox.

Comme je l'ai dis dans mon premier message, je me suis basé sur le modèle n°3 de gabarit du site alsacreations.com et j'ai ajouté des images de fond sur les "DIV" #Entete, #gauche et #centre. Et dans le "DIV" #centre, j'ai ajouté "overflow:auto" et "background-attachment:fixed"
Modifié par alpha (25 Oct 2006 - 00:33)

Coucou !

A première vue, je dirais déjà que tu as un problème de répétition de ton background.
Et également que celui-ci est mal positionné (mais ça tu le savais déjà)

Dans ton code on peux lire :

#centre {margin-left:150px;height:530px;background-image:url("corps.jpg");overflow:auto;background-attachment:fixed;}

Essaye ceci :

#centre {
margin-left:150px;
height:530px;
background-image:url("corps.jpg") left bottom no-repeat;
overflow:auto;
background-attachment:fixed;
}

Ici, on indique simplement qu'il faut aligner l'image d'arrière-plan à gauche et en bas de ton conteneur...
Car par défaut, celle-ci s'aligne en haut à gauche.

Et si je peux me permettre un conseil, n'hésite pas à sauter des lignes pour rendre tes instructions plus lisibles... Tu y gagneras lors de la relecture
Modifié par Cygnus (25 Oct 2006 - 10:12)

Bonjour

Avez-vous essayez avec IE et Firefox pour voir la différence d'affichage?

Avec Firefox quand je ne met pas "background-attachment:fixed", l'image de fond s'affiche bien.

Dès que je rajoute "background-attachment:fixed", l'image de fond se décale comme vous le voyez sur le lien. Pourquoi?

Ce soir je mettrais un lien avec une page sans "background-attachment:fixed" pour que vous voyez la différence.

J'ai bien lu ton post ...
et compris ton problème...

Mais as-tu essayé de positionné le fond comme je l'ai mentioné ?

a écrit :
#centre {
margin-left:150px;
height:530px;
background-image:url("corps.jpg") left bottom no-repeat;
overflow:auto;
background-attachment:fixed;
}

Bonsoir Cygnus

En rajoutant "left bottom no-repeat;" mon image de fond ne s'affiche plus.

Ce soir en rentrant chez moi, je mettrais une page sans le "background-attachment:fixed" pour vous montrer que l'image de fond du "DIV" #centre s'affiche bien alors que quand on le rajoute, l'image se décale.

Bonsoir

Voici un lien d'une page sans le "background-attachment:fixed" et la, l'image de fond est bien placée.

Est-ce un bug de Firefox qui gère mal le "background-attachment:fixed"?

http://synthese.free.fr/test2.htm

Le problème c'est que avec IE, le fond d'ecran bouge.

Bonjour,

a écrit :

l'affichage est bon sous IE, mais l'image de fond du "DIV" #centre est décalée avec Firefox.
.../...
Avec Firefox quand je ne met pas "background-attachment:fixed", l'image de fond s'affiche bien.
Dès que je rajoute "background-attachment:fixed", l'image de fond se décale comme vous le voyez sur le lien. Pourquoi?

Ce n'est pas un bug de FireFox, qui gère bien le "background-attachment:fixed". En revanche, ce n'est pas implémenté dans IE6, sauf pour le body:
http://meyerweb.com/eric/css/edge/complexspiral/demo.html

C'est alors normal de retrouver le même comportement sans cette propriété sous FireFox, qu'avec ou sans elle sous IE. Alors, ce n'est plus "fixé" du tout: le défilement du texte et de l'image sont alors liés, le texte ne défile pas sur une l'image de fond. La notion de fond "fixé" doit se penser par rapport au "fond conteneur parent" (comme si on clouait le fond du bloc sur celui de son parent), pas par rapport au bloc lui-même...

Si l'effet souhaité est que le texte et le fond défilent ensemble, nul besoin de fixer l'image de fond attachée ... Attaché, fixé, sources de confusions...
Modifié par gonga (27 Oct 2006 - 06:07)

Bonjour Gonga

Effectivement, je me suis renseigné de mon coté et le "background-attachement:fixed" s'applique par rapport au "DIV" #contener et pas par rapport au "DIV" #centre d'ou son décalage.

J'ai quand meme trouvé une solution pour que l'affichage soit identique sur IE et Firefox, j'ai rajouté dans le "DIV" #centre un "DIV" #texte avec "overflow:auto"

As-tu résolu ton problème ? Car j'ai exactement le même !