image differente fond forum

[serbe71]

bonjour a tous,

lien de mon forum
http://automobile-atelier.forumactif.org/

je souhaiterais savoir comment faire pour mettre une image de fond differente pour chaque forum a la place du gris

j ai fais ci dessous un croquis explicatif


merci a tous

[MlleAlys]

bonjour !
Alors, j'ai bien quelque chose à proposer, mais c'est un peu du bidouillage, alors peut être que quelqu'un aurait mieux... =S

Voilà le principe : on va utiliser la pseudo-class css :nth-child(N) pour désigner la ligne par sa place dans l'élément parent.
Donc d'abord il faut la place de la catégorie, puis la place de la ligne dans cette catégorie :

Les catégories ont pour class .forabg, et la première catégorie (AUTOMOBILE ATELIER ET VOUS) est le 6ième élément. Donc pour désigner cette catégorie, on va utiliser div.forabg:nth-child(6). Puis ça augmente régulièrement : la deuxième catégorie est à la place 7, la troisième place 8, etc.

Pour désigner les lignes, je vais utiliser .topiclist.forums li.row là c'est plus facile, puisque la place de la ligne correspond au numéro de la ligne en fait. ;)Par exemple pour désigner la deuxième ligne d'une catégorie : .topiclist.forums li.row:nth-child(2).

Enfin, on utilise la propriété background-image: url(URL DE L'IMAGE); pour ajouter une image de fond à l'élément désigné. Par exemple, pour mettre une image en fond du deuxième forum de la troisième catégorie, je vais mettre ce code dans mon css :

Code:

/* ceci est un commentaire pour s y retrouver; troisieme categorie deuxieme forum*/
div.forabg:nth-child(8) .topiclist.forums li.row:nth-child(2) {
  background-image: url(URL DE L'IMAGE);
}

Voilà en gros la solution que j'ai trouvée ! ^^" Ce qui n'est pas forcément des plus pratiques si tu modifies par la suite la structure de l'index (en modifiant les templates, ou bien en ajoutant des forums ou des catégories, etc) : il faudra alors sans doute modifier les numéros...

Bref, sinon : Est-ce qu'au moins ça fonctionne ?  =X

[serbe71]

salut,
tout d'abord un grand merci, c est top sa marche nickel
une petite question complementaire
comment faire pour que l image se dimensionne automatique suivant la resolution de l'écran

merci encore

[Self]

Bonsoir.

Il suffit d'ajouter :

Code:


width:100%;
height:100%;

Dnas le code que vous à donner MlleAlys.

Bonne soirée =) .

[MlleAlys]

c'est une image en background, alors j'utiliserais plutôt background-size: 100%;
Vous pouvez l'ajouter à chaque code, comme ceci (si je reprends mon exemple plus haut) :

Code:

div.forabg:nth-child(8) .topiclist.forums li.row:nth-child(2) {
  background-image: url(URL DE L'IMAGE);
  background-size: 100%;
}

Ou bien en mettre un général et donc ne pas être obligé de le remettre dans chaque :

Code:

.topiclist.forums li.row {
  background-size: 100%;
}

Avec background-size: 100%; l'image prend toute la largeur de l'élément. Pour qu'elle s'adapte aussi en hauteur (mais au risque de la déformer dans ce cas), il suffit d'ajouter un deuxième 100% :
background-size: 100% 100%;

[serbe71]

ok,
merci beaucoup pour l'aide apporter  

[MlleAlys]

de rien ^^