Div avec fond en image et sémantique correcte

Hello,

Je ne savais pas trop comment nommer ce topic.

Pour vous expliquer simplement mon problème, il m'arrive souvent de devoir créer des div ayant une hauteur en auto et une image de fond en haut et en bas.

Un exemple ici : http://www.paris-parc-hotel.com/
Le fond des mes div containerTop, containerMid et containerBottom sont différents, il ne m'était donc pas possible de tout mettre dans une seule div, même si ça aurait alléger le code et l'aurait rendu sémantiquement plus correct.

Je suis assez convaincu qu'il y a moyen de contourner cela mais je n'arrive pas à trouver comment.

Quelqu'un pourrait aurait une solution ?
J'aimerais rendre mes sites plus légers et vraiment séparer le fond de la forme.

Merci !

Skoua a écrit :
il ne m'était donc pas possible de tout mettre dans une seule div, même si ça aurait alléger le code et l'aurait rendu sémantiquement plus correct.

Utiliser une seule DIV plutôt que trois aurait «allégé» le code (pas de grand chose), mais ça ne l'aurait certainement pas rendu plus sémantique. Les DIV qu'ils soient vides ou imbriqués ou limités au maximum n'ont pas grand chose à voir avec la sémantique (pour ne pas dire rien).

Skoua a écrit :
Je suis assez convaincu qu'il y a moyen de contourner cela mais je n'arrive pas à trouver comment.

Tu peux imbriquer tes trois DIV plutôt que les faire se succéder. Voire utliser un contenu comme «support»; par exemple tu aurais pu éviter le dernier DIV vide, et utiliser l'image de fond comme fond du pied de page (avec un padding-top qui va bien).

Skoua a écrit :
J'aimerais rendre mes sites plus légers et vraiment séparer le fond de la forme.

Objectif sympathique, mais prend juste garde à ne pas compliquer inutilement ton travail par moments.