CSS problème avec background-attachment:fixed;
J'ai un site Joomla que j'ai créé un thème personnalisé. Le site est http://esn.teipir.gr/.
J'ai deux images de droite et de gauche que je veux qu'ils aient image de fond fixe.
J'utilise le CSS suivant les règles de
div.backgroundboxleft {
background-attachment: fixed;
background-image: url("/images/back_1.png");
float: left;
height: 822px;
top: 40px;
width: 457px;
}
et
div.backgroundboxright {
background-attachment: fixed;
background-image: url("/images/back_2.png");
float: right;
height: 822px;
top: 40px;
width: 457px;
}
Si je supprimer le background-attachment tout est OK avec les images, mais quand j'ajoute avec firebug le code suivant tout ce mess up.Pouvez-vous m'aider à faire les pages restent fixes sans la couleur d'arrière-plan en haut de l'image?
Grâce
Je bifurquais votre code (jsfiddle.net/f8HxS) et joué avec lui, mais ne semble pas possible de trouver des problèmes avec FF. Avez-vous testé d'autres navigateurs, ou uniquement de FF en vous donnant ce problème?
Voyez ce que je veux dire ici, i56.tinypic.com/16m7yhd.jpg et i53.tinypic.com/dwoolk.jpg
Vérifiez votre arrière-plan à une résolution inférieure. Sur mon écran (1366 x 768), quand j'ai de défilement sur le côté, il semble que
Une petite chose que je voudrais ajouter: lors du codage CSS pour les classes, un
Voyez ce que je veux dire ici, i56.tinypic.com/16m7yhd.jpg et i53.tinypic.com/dwoolk.jpg
Vérifiez votre arrière-plan à une résolution inférieure. Sur mon écran (1366 x 768), quand j'ai de défilement sur le côté, il semble que
back_1.png
comprend également back_2.png
, et que back_2.png
est simplement placée au-dessus d'elle. Check it out. jsfiddle.net/f8HxS/1/embedded/resultUne petite chose que je voudrais ajouter: lors du codage CSS pour les classes, un
.
avant le nom de la classe ne pourra le faire. Par exemple, div.backgroundboxright
peut être raccourcie à .backgroundboxright
.
OriginalL'auteur Alexander Talavari | 2011-08-28
Vous devez vous connecter pour publier un commentaire.
Lorsque vous définissez
background-attachment:fixed
il fixe l'arrière-plan par rapport à la fenêtre. Si vous devez ajuster labackground-position
de vos images afin qu'elles apparaissent dans le bon endroit. Si vous remplacez votrebackground
propriétés avec le css ci-dessous, la ligne correctement.Live exemple: http://jsfiddle.net/tw16/6fZ96/embedded/result/
De clarifier
background-attachment:fixed
cesse de l'arrière-plan de défilement de la fenêtre. Donc, si votre fenêtre est trop petite et que vous avez à faire défiler horizontalement ou verticalement à l'arrière-plan ne se déplace pas (c'est à dire qu'il sera superposé). Plus d'informations peuvent être trouvées ici.C'est la nature de l'arrière-plan fixe. Le fond est se couper à cause de la hauteur de la
div
. Il faudrait faire plus si elle devait tous être vu lorsque la fenêtre défile.Ne pas tout à fait - je ne peux pas voir l'image de droite maintenant, et j'ai encore besoin de faire défiler vers la gauche. Peut-être essayer
.art-sheet { margin-left: 503px; }
? Au moins qui fixera le contenu principal de se déplacer.Désolé, j'ai oublié de regarder la div de la hauteur. Merci de me le rappeler.
Vous devez être sur un petit écran. Il fonctionne exactement comme je m'attends. Le
background-image
's sont fixés en place. Il est fixe par rapport à la fenêtre. Doncdiv.backgroundboxright
est positionné1323px
à partir de la gauche de la fenêtre, c'est pourquoi il semble étrange lorsque vous faites défiler (parce que le bg est maintenant placé hors de l'écran et ne fait pas partie du contenu). Comme son nom l'indique, vous ne pouvez pas fix l'arrière-plan, puis en être surpris, quand il ne pas faire défiler la page. Je ne pense pas quefixed
doit être utilisé dans ce cas mais je répondais à sa question de savoir pourquoi elle a foiré.OriginalL'auteur tw16