CSS : comment afficher une image en fond de votre page

Comment insérer une image de fond de page dans votre design libre avec le CSS. Cette image de fond pourra se répéter ou non, ou encore être fixe.

1. Comment créer un template
2. Le script CSS de base pour votre image de fond
3. Personnalisation avancée de votre image de fond

Pour savoir comment créer un nouveau template dans votre design libre, rendez-vous sur la documentation suivante :
http://www.wifeo.com/documentation-82.html

Voici le script de base à insérer dans "Contenu CSS" pour afficher une image de fond dans les pages liées à ce template :

body {
background-image: url(ADRESSE_DE_VOTRE_IMAGE);
}

Remplacez simplement ADRESSE_DE_VOTRE_IMAGE par l'adresse de l'image à afficher en fond de votre page.

Cette image se répètera sur toute la surface de votre page. Si vous souhaitez que cela ne soit pas le cas, rendez-vous au paragraphe suivant.

Vous pouvez ensuite définir la manière dont votre image va s'afficher, et notamment la manière dont elle va se répéter.

Pour cela, il vous faut simplement ajouter des paramètres dans body{}.
Chaque paramètre doit se terminer par un point-virgule (;).

Voici la liste de ces paramètres :

•background-position
Permet de définir la position de l'image de fond.
Valeurs possibles : top (en haut), bottom (en bas), left (à gauche), right (à droite), center (au centre).

Vous pouvez ensuite combiner ces valeur (par exemple "top left" positionnera l'image en haut à gauche de vos pages).

•background-repeat
Permet de définir la manière dont votre image doit se répéter.
Valeurs possibles : no-repeat (pas de répétition), repeat-x (répétition horizontale), repeat-y (répétition verticale).

•background-attachment
Permet de fixer l'image de fond pour qu'elle ne défile pas avec le contenu de vos pages (lorsque le visiteur utilise les ascenseurs de son navigateur).
Valeur possible : fixed


Voici quelques exemples concrets :

Une image qui se répètera horizontalement en haut de page (comme une frise en haut d'un mur) :
body {
background-image: url(ADRESSE_DE_VOTRE_IMAGE);
background-position: top;
background-repeat: repeat-x;
}

Une image qui sera fixée en haut a gauche de vos pages, sans répétition :
body {
background-image: url(ADRESSE_DE_VOTRE_IMAGE);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
}

Une image qui se répète verticalement à droite :
body {
background-image: url(ADRESSE_DE_VOTRE_IMAGE);
background-position: right;
background-repeat: repeat-y;
}

Une image qui se répète horizontalement, en bas de votre page :
body {
background-image: url(ADRESSE_DE_VOTRE_IMAGE);
background-position: bottom;
background-repeat: repeat-x;
}