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% ; }