Le code :

Allez dans Apparence > Modifier le thème > Ajouter du CSS et collez ce code.

#selecteur {background-image : url(URL_DE_L'IMAGE);}

En vert : le sélecteur (ce que vous souhaitez modifier. #Header, #background, #body etc....) Voir la liste des sélecteurs.

En rouge : l'adresse url de votre image. Évidemment, votre image doit être hébergée quelque part, il est possible de le faire sur ekla dans Contenu > Gérer les fichiers.

 

Pour un peu plus de précision :

#sélecteur { background: url('URL_IMAGE') no-repeat fixed 0px 0px ; }

En rose : répétition de l'image. 

  • no-repeat (pas de répétition)
  • repeat (répétition)
  • repeat-x (répétition à l'horizontale, en largeur)
  • repeat-y (répétition à la verticale)

 

En bleu : image fixe ou non.

  • fixed l'image restera fixe, elle ne bougera pas et sera donc toujours visible)
  • (pour que l' image ne reste pas fixe, ne rien mettre)

 

En marron : position de l'image. Vous pouvez mettre vos valeurs en px ou %. La première valeur correspond à la position à l’horizontale et la deuxième à la verticale. Par défaut, les images se mettent à gauche, en haut (0px 0px).

 

Plusieurs fonds :

Il est possible que vous ayez un jour le besoin de mettre plusieurs fonds ou images, que ce soit dans votre header, background ou body de votre blog. Dans ce cas, il faut utiliser ce code :

#sélecteur { 
 background: url(urlfond1) no-repeat fixed  100% 100%,
 url(urlfond2) no-repeat fixed 50% 20%,
 url(urlfond3) repeat fixed 0% 100%;}

 

 

Retour à l'accueil