Image de fond de votre site internet

Sur E-monsite, vous pouvez ajouter une image de fond, quelque soit votre thème. Vous pouvez également mettre autant d'images de fond, que de structures.

► Exemple site 1 

 Exemple site 2

Tutoriel.net vous propose 2 solutions.

1 - La première solution est de mettre une image de fond sur toutes les pages de votre site internet.
Pour faire ceci, un seul code à insérer dans Configuration - Apparence - Modifier/Ajouter du code CSS au thème.

Modifier ajouter du code css au theme

Code

body {
margin:0;
padding:0;
background: url(http://www.LienDeVotreImage.png) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */

 

 


2 - La deuxième solution est de mettre une image de fond différente pour chaque page.

 Explication:

Vous avez le choix de mettre par exemple une image de fond spécifique pour la page d'acceuil, et une image de fond pour les autres pages de votre site.
En fait, il faut utilisé les structures (Configuration - Menus) pour placer vos images de fond.
Vous pouvez mettre autant d'images de fond différentes que de structures créées.

Si vous avez une structure par défaut, une structure pour la page contact, une structure pour votre blog, vous pourrez mettre 3 images de fonds différentes.


Dans votre Configuration - Apparence - Modifier/Ajouter du code CSS au thème, il faut mettre un code par structure.

Modifier ajouter du code css au theme

Codes

Code pour la structure de l'acceuil :

body#welcome_index {
margin:0;
padding:0;
background: url(http://LienDeVotreImageDeFond.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}

Code pour les autres structures :

body#NomDeMaStructure {
margin:0;
padding:0;
background: url(http://LienDeVotreImageDeFond.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}

  Placez impérativement le(s) code(s) des images de fond toujours après vos autres codes dans la partie CSS supplémentaires.
Si vous placez ce code avant vos autres codes, les autres codes ne fonctionneront plus. Pensez donc à toujours placer ces codes d'images de fond toujours en dernier !

Retour   Accueil   

Ajouter un commentaire