/ LES DOCUMENTATIONS
     




CSS : comment afficher une image en fond de votre page


Niveau de difficulté : Facile
Temps nécessaire : -
Logiciel necessaire : -


But de l'explication:
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.


Sommaire :
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


1. Comment créer un template
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


2. Le script CSS de base pour votre image de fond
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.


3. Personnalisation avancée de votre image de fond
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;
}

 


 

Dans le forum...


 
 

Autres documentations liées


• CSS : comment mettre une couleur de fond de pages
Extrait :
Savoir comment mettre une couleur de fond dans vos pages en utilisant le CSS dans le design libre de votre site.
Sommaire :
1. Comment créer un template
2. mettre une couleur de fond de page
3. Créer un dégradé en fond de page

 
• Comment créer une version mobile de mon site
Extrait :
Comment créer une version mobile de votre site. Quel en est l'intérêt et quels sont les conseils pour que cette version mobile soit ergonomique.
Sommaire :
1. Avant de commencer...
2. Créer un template destiné aux smartphones
3. Créer des pages destinées aux smartphones

 
• Comment créer un template
Extrait :
Savoir comment creer un nouveau template pour votre design. L'ensemble des template que vous allez creer (si vous en creez plusieurs) vont composer le design de votre site.
Sommaire :
1. Qu'est ce qu'un template ?
2. Comment créer un template ?
3. Comment attribuer un template à vos pages
4. Comment mettre en ligne vos templates ?

 
• Qu'est ce qu'un template ?
Extrait :
Connaitre la difference en un design et un template, a quoi sert un template, et comment creer un nouveau template pour le design de votre site.
Sommaire :
1. Qu'est ce qu'un template ?
2. Comment créer un template ?
3. Quel est l'intérêt de créer plusieurs templates ?

 
A propos
Aides
Wifeo Webmaster Place
Divers
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES