La propriété background comme son nom l'indique, nous permet de modifier l'arrière plan de notre page web: on peut mettre une couleur de notre choix , on peut mettre aussi une belle image comme arrière plan...

1 - background-color

Cette propriété s'utilise pour modifier la couleur de l'arrière plan d'un élément.

Exemple : coloration de l'arrière plan en rouge :

body { background-color: red ; }

2 - background-image

Cette propriété est utilisé pour mettre une image en arrière plan d'un élément. L'image est automatiquement répété pour recouvrir la totalité de l'élément en question.

Exemple :

body { backgroun-image: url(adresse) ; }    //adresse = adresse url de l'image 

3 - background-repeat

Cette proprièté définit la façon suivant laquelle l'image doit se répéter.

Exemple : background sans répétition de l'image

body { backgroun-image: url(adresse) ; background-repeat: no-repeat ; }  // pas de répétition d'image 

Exemple : background avec répétition horizontale de l'image ( repeat-x)

body { backgroun-image: url(adresse) ; background-repeat: repeat-x ; }  // répétition d'une façon horizontale 

Exemple : background avec répétition verticale de l'image ( repeat-y)

body { backgroun-image: url(adresse) ; background-repeat: repeat-y ; }  // répetition d'une façon verticale 

4 - background-position

Cette propriété est utilisé pour détérminer la position de l'image sur l'arrière plan en utilisant Les mots-clés suivants :

top           =   image au centre/haut de la page ou du bloc.
center     =   image au centre/centre de la page ou du bloc.
bottom   =   image au centre bas de la page ou du bloc..
right       =   image au centre/droit de la page ou du bloc.
left          =   image au centre/gauche de la page ou du bloc.

Exemple : background avec  une image palcée en haut à gauche

body { backgroun-image: url(adresse) ;
background-repeat: no-repeat ;
background-position: left top ; }
 l'image dans cet exemple se positionne en haut à gauche 

Remarque : On porra aussi utiliser le % pour le positionnement de l'image

Exemple : Pour positionner l'image en haut à droite on utilise le code :

body { backgroun-image: url(adresse) ;
background-repeat: no-repeat ;
background-position: 100% 0% ; } 

Exemple : Pour positionner l'image au milieu de la page on utilise le code :

body { backgroun-image: url(adresse) ;
background-repeat: no-repeat ;
background-position: 50% 50% ; }

5. Tutoriel Vidéo