La propriété CSS « background » permet de modifier l’arrière-plan d’un élément HTML. Grâce à cette propriété, on va pouvoir ajouter une couleur en fond d’un élément, y ajouter une image, définir sa position, son nombre de répétition et pleins d’autres personnalisations liées aux arrière-plans en HTML et CSS.
Indépendamment les uns des autres, vous pouvez définir 8 valeurs différentes de background.
Sommaire :
background-image permet de définir en arrière-plan d’un élément plusieurs ou une seule images.
Si les dimensions de l’élément sont plus petites que celles de l’image à afficher en arrière-plan alors l’image sera coupée.
Cependant si les dimensions de l’éléments sont plus grandes que celles de l’image alors celle-ci sera répété ou bien ne comblera pas tout l’arrière-plan en fonction de ce qui est défini dans la propriété « background-repeat ».
Cette valeur url(« chemin-vers-image ») intègre une image en arrière-plan en remplaçant « chemin-vers-image » par le chemin pour accéder à l’image à intégrer.
Exemple :
background-image: url("https://i.ibb.co/dkHwWBG/pexels-ihsan-aditya-1056251.jpg");linear-gradient() dessine un fond coloré en dégradé.
Exemple :
background-image: linear-gradient(to bottom, rgba(255,128,255,0.5), rgba(0,0,128,0.5));En combinat les valeurs présentées ci-dessus, vous pouvez ajouter plusieurs images et dégradés de couleurs en arrière-plan d’un élément.
Exemple :
background-image: linear-gradient(to bottom, rgba(255,128,255,0.5), rgba(0,0,128,0.5)), url("https://i.ibb.co/dkHwWBG/pexels-ihsan-aditya-1056251.jpg");
background-position permet de définir une position initiale à partir de laquelle l’arrière-plan s’affichera.
Cette propriété ne fonctionne que si une image est définie en arrière-plan avec « background-image » et qu’elle ne remplit pas parfaitement toute la zone de l’élément. Si vous avez mis un fond en couleur (ou dégradé de couleurs) ou que l’image remplit parfaitement l’arrière-plan de l’élément (image affichée en entière sans bordure de comblement) alors vous ne verrez aucune différence à l’utilisation de cette propriété.
top, center, bottom, left, right définissent la position initiale de l’arrière-plan selon un mot-clé prédéfini.
Exemples :
background-position: center;background-position: top;Les valeurs chiffrées (pourcentage, px, cm, ch, em, etc.) permettent de positionner l’image d’arrière plan selon l’axe horizontal (X) et vertical (Y).
La position initiale (0, 0) est située dans le coin supérieur gauche de l’élément.
La première valeur est liée à l’axe horizontal (largeur) et la seconde est dédié à l’axe vertical (hauteur).
L’utilisation d’une valeur en pourcentage est relative aux dimensions de l’élément.
Exemples :
background-position: 35% 80%;background-position: -30px -50px;background-position: 0 0;
background-size permet de définir la taille des images en arrière-plan d’un élément.
Avec cette propriété vous allez pouvoir déterminer si une image doit remplir toute la zone d’arrière-plan de l’élément ou bien si ses dimensions doivent être modifiées pour ne couvrir qu’une seule partie de l’arrière-plan.
Cette valeur définit si l’image d’arrière-plan doit remplir l’arrière-plan avec une duplication de l’image par défaut si celle-ci n’est pas assez grande.
Exemple :
background-size: contain;Cette valeur indique si l’image doit s’étirer pour couvrir tout l’arrière-plan.
Exemple :
background-size: cover;Les dimensions de l’image peuvent être modifiées par une valeur numérique ou en pourcentage.
Exemples :
background-size: 20%;background-size: 250px 150px;
background-repeat permet de définir si l’image en arrière-plan d’un élément doit se répéter ou non si celle-ci ne couvre pas l’entièreté de la zone d’arrière-plan.
Ces valeurs permettent de répéter l’image d’arrière-plan sur l’axe horizontal (repeat-x), vertical (repeat-y) ou les deux en même temps (repeat) jusqu’à recouvrir l’ensemble de ou des axes à répéter.
Exemples :
background-repeat: repeat-x;background-repeat: repeat;L’image d’arrière-plan sera répétée autant de fois que possible sans rognage. La première et dernière image seront collées aux bords de la zone d’arrière-plan de l’élément.
Exemple :
background-repeat: space;L’image d’arrière-plan sera répétée autant de fois que possible et sera aussi étirée lorsque cela sera nécessaire afin que l’image ne soit ni rognée ni ne laisse d’espace.
Exemple :
background-repeat: round;L’image d’arrière-plan ne sera pas répétée si elle ne remplit pas par ses dimensions par défaut la zone d’arrière-plan de l’élément.
L’image n’étant pas répétée, sa position peut être définie par la propriété CSS : background-position.
Exemple :
background-repeat: no-repeat;
background-origin permet de définir l’origine de l’image d’arrière-plan intégrée grâce à la propriété CSS « background-image ». L’origine de l’image est relative à la bordure, à l’intérieur de la bordure ou à l’intérieur de la zone d’arrière-plan de l’élément HTML.
L’image d’arrière-plan sera positionnée de façon relative à la bordure de l’élément.
Exemple :
background-origin: border-box;L’image d’arrière-plan sera positionnée de façon relative à l’intérieur de la bordure de l’élément.
Exemple :
background-origin: padding-box;L’image d’arrière-plan sera positionnée de façon relative au contenu de l’élément.
Exemple :
background-origin: content-box;background-clip permet de définir la façon dont une image (background-image) ou couleur (background-color) s’étend en arrière-plan d’un élément. L’arrière-plan pourra s’étendre jusqu’à la bordure, l’intérieur de la bordure, sur l’ensemble du contenu ou bien en fond de couleur d’un texte.
L’arrière-plan image ou couleur s’étend jusqu’à la limite extérieur de la bordure.
Exemple :
background-clip: border-box;L’arrière-plan ne sera pas dessiné dans la zone de bordure. Il s’étendra jusqu’à la limite intérieure de la bordure (padding).
Exemple :
background-clip: padding-box;L’arrière-plan sera limité aux dimensions du contenu de l’élément.
Exemple :
background-clip: content-box;L’arrière-plan sera limité au texte contenu dans l’élément HTML. On peut l’afficher en fond de couleur du texte, si la couleur du texte est définie sur « transparent ».
Exemple :
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-attachment permet de définir si l’image d’arrière-plan reste fixe ou si elle peut défiler avec le défilement du bloc l’englobant.
Plusieurs valeurs peuvent être utilisées si l’arrière-plan contient plusieurs images, exemple « local, scroll ».
La position initiale du défilement dans nos exemples sera la suivante :
L’arrière-plan est lié à la bordure de l’élément et reste fixe par rapport au contenu. Il ne se déplacera donc pas si l’élément défile.
Exemple :
background-attachment: scroll;L’arrière-plan restera fixe. Il ne se déplacera pas avec l’élément même si l’élément peut défiler.
Exemple :
background-attachment: fixed;L’arrière-plan peut défiler et il se déplacera avec l’élément si celui-ci défile.
Exemple :
background-attachment: local;
background-color permet de définir une couleur en arrière-plan d’un élément HTML.
La propriété background-color se définit par une valeur CSS « color » et peut être indiquée de différentes manières.
Exemple :
background-color: blueExemple :
background-color: #4296f3;Exemple :
background-color: rgb(128, 255, 255);Exemple :
background-color: hsla(175, 100%, 75%, .50);
background est une propriété CSS qui permet de définir en une seule ligne l’ensemble des valeurs en lien avec la gestion d’arrière-plan d’un élément (background-color, background-image, background-origin, background-size, background-repeat, etc…).
Quelques exemples :
background: blue;
background: url("https://i.ibb.co/dkHwWBG/pexels-ihsan-aditya-1056251.jpg") no-repeat scroll border-box;
background: url("https://i.ibb.co/dkHwWBG/pexels-ihsan-aditya-1056251.jpg") text repeat;
La propriété CSS permet de grandes possibilités de gestion des arrière-plans d’éléments. Grâce à l’ensemble des propriété « background » vous allez pouvoir adapter à la perfection n’importe quel arrière-plan au bloc qui l’englobe.
Elle peut même vous permettre d’ajouter des vidéos en fond de page ! Pour cela, nous vous invitons à suivre le tutoriel HTML pour intégrer une vidéo background.
Cette richesse de possibilités peut néanmoins rendre complexe l’utilisation des propriétés CSS « background ». N’hésitez donc pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement l’aide d’un freelance.