Comment intégrer une image de fond différente sur chaque rubrique ?

Vous souhaitez retrouver un background de fond différent sur chacune de vos rubriques. Ce background porte sur l'élément body.

1ère méthode : classe CSS sur la page

Vous définissez pour chaque rubrique une class CSS dans le manage. Vous uploadez votre image de fond en passant par le centre de ressource et vous récupérez son url :

/media/votre_image__013546800_1749_12012010.jpg

Ensuite dans votre feuille de style, vous récupérez la class CSS de votre rubrique et l'url de votre image de fond :

 
body.class_css_ma_rubrique{
background:url(/media/votre_image__013546800_1749_12012010.jpg) no-repeat; 
}
 

De cette façon l'image de fond est bien appliquée sur la rubrique en cours. Dans le cas d'une rubrique qui publie un catalogue, cela vous permet de retrouver une image de fond sur la vue résumée de votre produit(short_product.html) mais aussi la même image de fond sur le détail de votre produit (product.html)

Si vous souhaitez changer d'image, vous pouvez soit modifier l'image dans le centre de ressource en téléchargement une nouvelle image : le même nom de fichier sera conservé ou alors modifier votre css en changeant l'url de background.


2éme méthode : on passe par l'image de chapitre (balise

<mx:chapterpicture/>

Cette approche permet de changer d'image sans pour autant passer par du CSS et sans pour autant définir de class CSS sur la page. Elle a le mérite d'être plus souple.

Côté webo factory, vous activez l'option "Association de visuels aux rubriques"

Vous retrouvez cette option sur chaque rubrique du manage (onglet Mon site). Dans la méthode de publication de votre choix, il suffit d'uploader l'image désirée.

Ensuite dans votre template MainPage.html, vous allez inclure la balise suivante de cette façon :

 
<div class="img_body" style="position:absolute;z-index:1;width:800px;">

<mx:chapterpicture/>

 
</div>
 

La position en absolute et le z-index associé, permettent de jouer sur la profondeur de champ et donc de placer l'image en arrière plan par rapport aux blocs existants (page, banner, wrapper, footer). Du coup, il faudra définir un z-index sur l'un de ces blocs.

En natif on s'y retrouve en définissant un z-index:999 sur le bloc "page" (la position relative est définie par defaut), mais tout dépend aussi de votre charte graphique. Si le bloc page est à 100%, il se peut que l'outil d'intégration soit masqué par le z-index du calque page, dans ce cas il sera préférable de le définir sur les blocs :

<banner>, <wrapper> et <footer>

A vous de jouer!