5568 sujets

Sémantique web et HTML

Salut tout le monde ! Smiley biggrin

Juste une petite question de CSS, j'ai remarqué que mozilla était assez exigeant sur l'utilisation d'image de fond en CSS, soit il tient pas compte des no-repeat soit (comme mon cas la) il affiche carrement pas l'image ! alors que IE l'affiche sans problème... aperçu de style CSS :

.VodFondEdito {
	background-attachment: fixed;
	background-image: url(img/vod/titre-vod.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}


Je suis sûr de mon url... et ca fonctionne sur IE, des conseils, une idée svp ??
Modifié par prologg (11 May 2006 - 13:15)
a écrit :
'background-attachment'
Valeur : scroll | fixed | inherit
Initiale : scroll
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique si l'image est fixe par rapport à la zone de visualisation (pour la valeur 'fixed'), ou si celle-ci défile en même temps que le document (pour la valeur 'scroll'). Noter qu'il n'existe qu'une seule zone de visualisation par document ; c.à.d., même si l'élément est doté d'un mécanisme de défilement (voir la propriété 'overflow'), un arrière-plan avec la valeur 'fixed' ne se déplace pas avec cet élément.

Même si l'image est fixe, celle-ci n'est visible que quand elle se trouve dans les aires d'arrière-plan ou, d'espacement ou de bordure de l'élément. À moins que l'image ne se répète en mosaïque ('background-repeat: repeat'), celle-ci peut ainsi ne pas apparaître.


c'est donc la propriété : "background-attachment: fixed" qui semblerais poser problème, j'ai essayé sans , l'image apparait...
Hello,
Problème similaire : je mets un zoli rectangle à coins arrondis comme image de fond d'un <div class="blokBLeu">.
J'ai mis dans la css un padding pour que mon texte ne touche pas les bords de ce rectangle.
Sous IE7, le padding ne concerne que le texte.
Sous Firefox, l'image d'arrière-plan se réduit de la valeur du padding. (En fait elle se répétait même, mais j'ai fixé cela avec un no-repeat).

Quelqu'un a une idée ? Je ne vais tout de même pas faire 2 feuilles de style !!!

Mon code CSS :
.blokBleu {
	background-image: url(images/blok-bleu.png);
	background-repeat: no-repeat;
	width: 250px;
	height: 300px;
	padding: 10px;
	border: solid 1px #000000;
}
salut,

à prologg >

Quand une image est mise en background-attachment:fixed; alors son positionnement se fait par rapport à la fenêtre du navigateur et non par rapport à l'élément concerné par la propriété background.

à marco_polo >

A priori ce que tu décris est impossible. Donc si tu peux donner un code plus complet voire un exemple en ligne, ce serait bien.
Modifié par clb56 (17 Nov 2006 - 22:57)