Les fonds

Les propriété background définissent les arrière-plan. Elles s'utilisent généralement avec des éléments de type block

background-color permet de définir une couleur de fond. Remplacez simplement COULEUR. Si vous ne savez pas comment noter cette valeur, je vous renvois à l'article sur les couleurs:
=> http://fanstasy-graph.eklablog.net/couleur-a28204421

background-image permet de placer une image en arrière-plan. Par défaut, elle est placé en haut à gauche, et se répètera en mozaïque (horizontalement et verticalement) si elle est plus petite que sont conteneur.

background-repeat s'utilise avec la propriété background-image. Elle permet de définir si l'image doit se répéter si elle est plus petite que son conteneur.
Elle peut prendre les valeurs suivantes :
• repeat; valeur par défaut, l'image se répète en mozaïque
• no-repeat; l'image ne se répète pas, et laissera donc du vide si elle est plus petite que son conteneur
• repeat-x; répète horizontalement
• repeat-y; répète verticalement

Cette propriété s'utilise avec background-image. Elle permet de fixer l'image d'arrière plan (pour qu'elle ne bouge pas lorsque l'on descent la page)
Elle peut prendre deux valeurs.
• scroll; valeur par défaut, l'image n'est pas fixée
• fixed; l'image est fixée

Cette propriété permet de positionner l'image d'arrière plan. Par défaut, celle-ci ce trouve dans le coin en haut à gauche de son conteneur. La première valeur X définit sa position horizontale et Y sa position verticale. Vous pouvez utiliser des valeur en px, em ou %
Il est également possible de la positionner avec les valeurs suivantes (plus simple, mais moins précises) : • left; à gauche
• right; à droite
• center; au center
• top; en haut
•bottom

Pour ne pas changer, cette propriété s'applique également à background-image. Elle permet de définir la taille de l'image d'arrière plan. X indique sa largeur et Y sa hauteur. Vous pouvez définir les valeur en px, em ou %
Vous pouvez également utiliser les valeurs cover ou contain

=>Voir l'effet

Comme cela fait beaucoup de propriété différente, nous pouvons utiliser background pour toutes les regrouper en une seule. Les valeurs sont les même que pour les propriétés vues au dessus, mais l'ordre à son importance :

Si vous ne voulez pas utiliser une des valeurs (par exemple si vous ne voulez pas de couleur de fond, laissez simplement le champs vide.

/!\ Le / entre background-position et background-size est indispensable. Si vous voulez que votre arrière plan soit positionné par défaut mais que vous voulez changer sa taille, vous devez renseiger des valeur à position (dans ce cas, left top fera l'affaire)

Vous pouvez également définir plusieurs images d'arrière plan, en définissant séparément leurs position, si elles se répètent, si elles sont fixes... L'ordre à bien évidemment son importance, la première image sera l'image de premier plan, la dernière celle d'arrière plan.