Bonjour Fae !

Quand tu parle de "mettre le rang en image de background", je suppose que tu sous-entends finalement que :

1. Tu as des images de rangs
   
2. Tu souhaites que ces images ne s'affichent pas en dessous du pseudo mais bel et bien derrière

Si oui je pense que le moyen le plus simple d'arriver au résultat escompté serait de "remonter" l'image pour la placer exactement derrière le pseudo (en checkant les dimensions pour s'assurer qu'il n'y ait pas de soucis, à vue d'oeil, ça devrait le faire).

Toutefois, je te laisse me corriger si je me trompe (ou éventuellement m'indiquer un schéma/le lien du forum en question où constater l'effet) si tu le juge nécessaire

En fait, c'est beaucoup de CSS et un chouïa de template pour pouvoir simplifier notre CSS.

Par étapes, tout simplement :

1 - Le template

Commence par te rendre dans le template . Repère la variable {postrow.displayed.POSTER_RANK}. C'est elle qui contient le code de ton rang. On va faire en sorte de pouvoir le repérer facilement en CSS, donc pour cela il faut l'entourer d'une balise <span> contenant une classe, comme ceci (par exemple) :

Code:

<span class="poster-rank">{postrow.displayed.POSTER_RANK}</span>

2 - Le CSS

Dans ton CSS, tu va changer la position de tes éléments portant la classe .poster-rank afin de faire en sorte de pouvoir les remonter par rapport à leur position initiale.

Pour cela, on utilise la propriété position que l'on fixe à relative. Ensuite, on joue avec top pour le faire remonter. Comme ceci :

Code:

.poster-rank {
    position: relative;
    top: -20px;
}

A toi d'adapter la valeur pour le remonter suffisamment

3 - Dernières retouches

Le simple fait de remonter ton image ne rendra peut-être pas l'effet désiré. Notamment, il est fort probable que ton image cache le pseudo. On peut arranger ça en forçant l'image à se placer derrière le pseudo, cela passe par la propriété z-index.

Ainsi, il faut rajouter un z-index à ton image, mais également un au pseudo, et faire en sorte que le premier soit plus petit que le dernier.

Petit détail avec le z-index : cette propriété ne fonctionne que si l'élément est positionné. C'est le cas de ton image (qui est positionnée de manière relative), mais pas de ton pseudo : il faudra préciser un positionnement (plus d'infos sur z-index [EN]).

Donc il faudra ajouter z-index: 1; à ton image de rang, puis pour ton pseudo :

Code:

.name {
    position: relative;
    z-index: 10;
}

Après il faut peaufiner pour améliorer le rendu (opacité ?), mais dans l'idée tu devrais être en mesure d'obtenir l'effet désiré avec cette histoire de positionnement

Exactement, c'est la bonne variable

Ce "type de manoeuvre" (comme tu dis ^_^) peut s'appliquer sur tout et n'importe quoi. En fait, il s'agit simplement de positionner les éléments (relativement à leur position initiale) et rien ne t'empèche de le faire pour modifier le rendu visuel de ton forum (vu que changer la structure ne serait pas forcément pertinent).

Si ton problème est résolu, tu m'en vois ravi et je t'invite donc à l'indiquer dans le titre du sujet pour faciliter le travail des modérateurs


Merci à toi et bonne soirée !