J'ai un petit problème avec la position de mon image de fond sur le code de mon site ; j'aimerais que cette dernière reste fixée de manière à ce que uniquement le texte défile lorsque l'on scroll mais rien n'y fait. J'ai pourtant bel et bien utilisé la propriété "background-attachment : fixed"... J'ai testé sur plusieurs navigateurs différents et le problème est le même partout, le fond n'est jamais fixe. Voici mon code css :
J'ai bien mis toutes ces infos, no-repeat, fixed, mais rien n'y fait, le bg ne se fixe pas et continue de descendre en même temps que le scroll, j'avoue que je n'y comprends plus rien haha
As-tu un lien vers ta page, parce que normalement elle est fixe.
Ou alors on n'entends pas la même chose par fixe : avec ton code selon la taille de l'image elle peut se répéter en mosaïque.
Non, elle ne se répète pas en mosaïque, j'ai mis "no repeat", en fait je veux que le fond reste fixe pendant que l'on scroll la page, en gros je veux que seuls les éléments de la page défilent (textes, images etc.) tandis que le fond lui ne défile pas, ce qui est supposé se produire avec la fonction "fixed", je pense..
Je viens de regarder ton code et tu mets une image dans le background et ensuite plus bas une couleur et je pense que ça contribue pas au bon fonctionnement du truc. Tu n'as pas besoin de préfixer background-attachement avec des -moz-, -webit- etc normalement maintenant ça passe sur tous les navigateurs. Le css est lu de haut en bas donc il prend que ta couleur, les propriétés suivantes prennent le dessus sur les propriété qui sont avant. Après tu as aussi un top:0; dans ton body. Donc la ça peut pas marcher, la propriété top marche uniquement si tu as un positionnement autre que static sur ton body ( le static est le positionnement par défaut). Tu devrais pas mettre ton body autrement qu'en static c'est lui qui contient ton site donc normalement il ne faut pas le sortir du flux et tu dois utiliser margin-top et pas top dans ce cas de figure ou margin tout simplement. Les premières lignes de ton css devraient être :
body{ margin:0; padding:0; width:100%; // et pour le background background:url(../images/monimage.jpg)no-repeat fixed top center; background-size:cover; } Par contre je placerai la nav en position absolute avec un width de 100%;
parce que la en statique ton padding fausse l'alignement et tu te retrouves avec du retrait sur le bord gauche. Ça risque aussi de fausser le reste. Et plutôt que faire un padding dans la nav pour décaler le texte en bas il vaut mieux faire un line-height. La aussi l'ordre n'est pas bon le bonne ordre c'est nav nav ul nav ul li nav ul li a nav ul li a:hover
Voilà mais je pense que tu devrais bien revoir le css parce qu'il y a encore des coquilles. Bien regarder le positionnement en css, qu'est ce que le flux etc.
Life is a chance .. Do good things make a trace before you leave :)
Background attachment ne fonctionne pas
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)