Probleme de background-position

Salut tous,

j'ai un problème avec cette sal*perie de background-position. Je voudrais positionner le haut de mon image de fond à 50% du haut de mon div conteneur.
Avec background-position: left 200px; ça marche.
Avec background-position: left 50%; ça marche pas.
Avec background-position: 0% 50%; ça marche pas . Pourquoiii ?

Je suis sous FF 3, et j'ai l'impression qu'il gère mal les % pour cette propriété...


Le css du div:

background-image: url(...);
background-position: left 50%;
background-repeat: no-repeat;


A l'aide

kika a écrit :
Salut tous,

Avec background-position: left 50%; ça marche pas.

En CSS 2.0 on ne peut pas mixer mot-clé et %.

kika a écrit :
Avec background-position: 0% 50%; ça marche pas . Pourquoiii ?

Quand on utilise deux pourcentages, ces valeurs se réfèrent à la fois au conteneur et à l'image. En l'occurence, tu prends le point situé à 50% de ton image, et tu le places à 50% du conteneur.

Et avec ça, ça donne quoi ?

background-position: center left;

Salut,

mistike a écrit :
En CSS 2.0 on ne peut pas mixer mot-clé et %.

Euh... pardon ?

mistike a écrit :
Quand on utilise deux pourcentages, ces valeurs se réfèrent à la fois au conteneur et à l'image. En l'occurence, tu prends le point situé à 50% de ton image, et tu le places à 50% du conteneur.

Euh... quoi ?

mistike a écrit :

background-position: center left;

center est l'équivalent de 50% et left de 0%. (Lorsqu'on n'utilise pas l'une des valeurs top | center | bottom | left | right, la première correspond au niveau horizontal et la seconde au niveau vertical).


Le problème est que lorsque tu mets une unité (px, em, cm...) il s'agit effectivement d'une distance fixe par rapport à un bord (gauche ou haut) alors que lorsque tu utilises un pourcentage un calcul est effectué dans lequel interviennent la hauteur du bloc conteneur et celle de l'image : ce n'est donc pas fixe. Par exemple s'il s'agit de l'image de fond du body il suffit de redimensionner la fenêtre pour que l'image de fond se déplace.

Pour plus d'infos, lire background-position.
Modifié par Heyoan (12 May 2009 - 01:41)

Alors, j'ai essayé avec left, top et les autres mots clés, ça a l'air de marcher ("a l'air" parceque c'est une grande image donc je suis pas sûr...). Mais avec 2 pourcentages ça ne marche plus

C'est pour un background de billet de blog. Le fond standard du conteneur est clair et se repete verticalement. L'image du background par dessus est foncée. Le background viendrait se positionner à 50% du haut du conteneur, pour laisser apparaitre la couleur claire en haut (le fond standard) et une couleur foncé en bas, à partir de la moitié du conteneur (le background image).

Je veux aligner le haut de mon image background au milieu du billet, donc à 50% du haut du conteneur, pour que la démarcation des couleurs soit toujours au centre (verticalement), peut importe la hauteur du billet. Je sais pas si c'est très clair ^^


Peut-etre que je me goure, je pensais que 0% 50% aligneraient le coin haut gauche de l'image à 0% du bord gauche et à 50% du bord haut (du conteneur)... non ?


Le code:

<div id="billet">
  <div id="corps">
    <?php the_content(__('(more...)')); ?>
  </div>
</div>

#corps { 
	background-image: url([b]image foncée[/b]);
	background-position: 0% 50%;
	background-repeat: no-repeat;
}

#billet{
	background-image: url([b]image claire[/b]);
	background-repeat: repeat-y;
}

kika a écrit :
Peut-etre que je me goure, je pensais que 0% 50% aligneraient le coin haut gauche de l'image à 0% du bord gauche et à 50% du bord haut (du conteneur)... non ?

Non : lire ma réponse précédente.

Pourquoi ne pas tout simplement créer une image de grande taille (en hauteur) et de 10px de large. la moitié haute serait de couleur claire et la moitié basse de couleur foncée.

Il suffirait ensuite de faire :

html

<div id="billet">
    <?php the_content(__('(more...)')); ?>
</div>

css

#billet {
	background: #ccc url(image_mixte) left center repeat-x;
}

Modifié par Heyoan (12 May 2009 - 02:16)

Pas bête

Mais... pas possible
J'ai des bords droits et gauches ombrés, donc obligé d'avoir une image de la largeur du div, et de 2 ou 3 px de haut et qui se répète verticalement

C'est pour ça que j'ai pensé mettre un second background par dessus, quitte à rajouter un div dans le 1er (oui je sais c'est mal, mais tant pis v_v)

PS (pardon du double post):
dans ton lien c'est dit: Pour la paire de valeurs '100% 100%', c'est le coin en bas et à droite de l'image sur celui du bord de l'espacement de la boîte.

Ca serait pas plutôt '100% 100%' aligne le [b]coin haut gauche de l'image au coin bas droite du conteneur[/i] ?

kika a écrit :
J'ai des bords droits et gauches ombrés, donc obligé d'avoir une image de la largeur du div

Ben il n'y a pas de problème puisque le repeat-x va remplir toute la largeur.

kika a écrit :
dans ton lien c'est dit: Pour la paire de valeurs '100% 100%', c'est le coin en bas et à droite de l'image sur celui du bord de l'espacement de la boîte.

Ca serait pas plutôt '100% 100%' aligne le [b]coin haut gauche de l'image au coin bas droite du conteneur[/i] ?

Ben non, c'est bien ça : fais un test.

Sinon, pour éviter les doubles posts il suffit d'éditer.

Heyoan a écrit :
Euh... pardon ?

Ben si, en CSS 2.0 c'est pas autorisé.
Mais la norme en est à CSS2.1 et les navigateurs parait-il aussi, donc ouais on peut mélanger mots-clés et valeurs
Modifié par Felipe (12 May 2009 - 09:19)

Heyoan a écrit :
Salut,

Euh... pardon ?

Ca ne marche pas en CSS 2.0, mais en CSS 2.1. J'avoue humblement que j'ai trouvé ça en cherchant hier sur la base de la question posée, donc bon. J'ai trouvé ça ici, ou encore là.

Maintenant, c'est vrai que les navigateurs actuels devraient le supporter, mais comme je n'avais que "ça ne marche pas" comme piste, je suis allée au plus simple. En plus il était tard

Et sachant qu'à ma connaissance (et après quelques tests), top left aurait dû marcher.

Felipe a écrit :
Ben si, en CSS 2.0 c'est pas autorisé.

Arf ! J'avais pas fais gaffe.

Me revoilà.

Bon, j'avais mal compris la fonction background-position en fait. Je la mélangeais un peu avec margin.

Du coup pour mon problème c'est facile en fait: un seul div, une image de toute la largeur et tres haute, la demarcation de couleur au milieu, et un background-position center.

kika a écrit :
Du coup pour mon problème c'est facile en fait: un seul div, une image de toute la largeur et tres haute, la demarcation de couleur au milieu, et un background-position center.

Ce que je te proposais en somme...

Sauf que (je me répète) c'est inutile qu'elle fasse toute la largeur car autant éviter d'alourdir le chargement de ta page : il suffit de 10px et de préciser repeat-x.

Oui

Sinon si il faut qu'il fasse toute la largeur, parceque mes bords droits et gauches sont graphiques, ils doivent etre a leur place, je sais pas comment dire ^^

kika a écrit :
je sais pas comment dire ^^

Moi non plus... que tu utilises une image qui fasse la largeur du DIV ou une moins large avec repeat-x cela revient exactement au même. Tu pourrais faire un test pitêt ?

Non ça revient pas au même ^^

Mes bords droit et gauche du div conteneur doivent avoir des bords floutés. Si je mets un repeat-x ils auront pas de bords. A moins de mettre une autre div par dessus avec une image en repeat-y.

En plus mon image de fond n'a pas une demarcation des couleurs horizontale mais en forme de vague, donc le repeat-y n'irait pas.


Je finis mon truc et je mets un lien pour que tu vois

kika a écrit :
Mes bords droit et gauche du div conteneur doivent avoir des bords floutés.

OK ! Cette fois j'ai compris.