Positionner une image décorative

Bonjour à tous,

Je suis en train de réaliser le design d'un jeu en PHP, et me voila confronté à un problème lié à la décoration.

Je voudrais disposer des images à certains endroits de ma page.

Je voudrais parvenir à un résultat de ce genre : http://espritdubois.free.fr/la_recre/resultat.gif

Pour cela, je ne sais comment placer mon image. Le positionnement actuellement fait ne sert à rien. Je cherche un moyen "propre" de le faire.

Sauriez-vous m'aider à trouver un moyen de faire ?

Je vous en rmercie d'avance,


Sephi-Chan

Hello,

Je n'ai pas bien compris pourquoi tu souhaitais employer une balise image <img> plutôt qu'un arrière-plan.
A lire : http://forum.alsacreations.com/faq/#item72

Bonsoir,

Désolé de dire ça mais il semble que tu n'as pas regardé le site . j'utilise CSS pour afficher l'image, mais je cherche à positionner l'image comme sur l'exemple, mais j'ignore comment le faire proprement, et surtout de manièere à ce qu'ele s'affiche au bon endroit chez tout le monde.


Sephi-Chan

Sephi-Chan a écrit :
Désolé de dire ça mais il semble que tu n'as pas regardé le site .

Peut-être bien que si, justement. Tu as utilisé une image de fond... mais appliquée à un élément que tu as créé pour l'occasion, plutôt qu'appliquée comme fond d'un conteneur. Donc forcément, ça ressemble furieusement à une image de contenu (élément HTML img) toute seule dans son coin que l'on aurait positionné en absolu... sauf que c'est un bloc vide tout seul dans son coin que l'on a positionné en absolu avant de lui donner une image de fond. La différence est subtile.

Je plussoie l'idée d'une image de fond sur un bloc conteneur (div#centre, par exemple), ce qui permettra entre autres d'éviter que l'image ne cache le texte.

À la rigueur, on peut couper l'image en deux, et en mettre une partie comme image de fond de div#centre et l'autre partie comme image de fond de div#pied.
Cela demandera, bien sûr, de positionner les images de fond à l'aide de la propriété background-position.
Modifié par mpop (13 Oct 2006 - 18:53)

J'avais précisé que le bloc positionné en absolue était juste la pour montrer comment je voulais positionner :s.

Toujours est-il que je n'arrive pas du tout à utiliser background-position :

http://espritdubois.free.fr/la_recre/

Voila j'ai séparé mon image de personnage en 2 :
http://espritdubois.free.fr/la_recre/images/personnage1-1.gif http://espritdubois.free.fr/la_recre/images/personnage1-2.gif

Je me retrouve face à deux problèmes :
- Trouver où appliquer l'image de fond qui chevauche plusieurs blocs.
- Donner la côte qui séparer le haut de l'image (celle avec la tête), si je met en pixel (ou en %), ça buggera si la page s'aggrandit (en rajoutant du texte par exemple). La solution serait peut-être de donner la côte en partant du bas du bloc.


Sephi-Chan, qui commence à en avoir ras-le-bol des CSS! Je perds la foi et la patience !
Modifié par Sephi-Chan (13 Oct 2006 - 19:53)

Heu... je pensais à une découpe haut-bas (une image pour div#contenu et une pour div#pied), pas une découpe gauche-droite, à vrai dire.

En fait, le coup des petits doigts qui dépassent du cadre ça limite beaucoup tes possiblités. Si tu veux les inclure en image de fond, il faudra que la bordure elle-même fasse partie de l'image de fond, sinon ça ne passera pas.

Pour la découpe verticale, un petit exemple de code :

#centre {
}

#contenu {
	text-align: justify;
	padding: 1px 0; /* évite des problèmes de fusion des marges */
	background: url(images/personnage1-2.gif) left bottom no-repeat;
}

Bien sûr, avec l'image telle qu'elle est maintenant ça ne passe pas.


Au pire, pour « faciliter » les choses, on pourra peut-être revenir au positionnement absolu. Auquel cas, il faudra positionner l'image en absolu par rapport à un bloc conteneur positionné en relatif, puis positionner div#contenu en relatif également et jouer sur les z-index pour que le contenu textuel passe bien au dessus de l'image.

Bref, c'est pas évident non plus pour un débutant.

Une piste malgré tout :
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html

Merci pour ton aide.

Je pense laisser le tomber les doigts qui dépassent si ça peut aider à simplifier le problème.

Mais il restera encore le problème du positionnement. Je vais "étudier" un peu la méhode qui combine les deux modes de placement.

En tout cas merci bien (et que personne n'hésite s'il à une méthode/idée ),


Sephi-Chan