Comment votre rectangle est rempli
L’arrière-plan d’un élément HTML correspond à ce qui apparaît derrière le texte. Bien que CSS permette d’appliquer un arrière-plan sur n’importe quel type d’élément HTML, il est surtout utilisé pour les éléments de niveau bloc.
Les fonds ne sont appliqués que sur l’élément ciblé. Cependant, étant donné que la plupart des éléments HTML ont un arrière-plan transparent, appliquer un arrière-plan au corps ressemblera à celui appliqué à tous les éléments.
Couleur de fond/Background-color
transparent Hérité des enfants Éléments : non.Comme nous avons déjà exposé les différentes manières de définir une couleur en CSS, l’application d’une couleur de fond est simple :
body{ background: #f2eee9;}L’élément entier sera rempli avec une couleur de fond unie. N’oubliez pas de toujours choisir une couleur de texte appropriée pour que votre contenu reste facile à lire.
Image de fond/background-image
Comme les couleurs unies ne suffisent généralement pas, CSS permet d’appliquer des images comme arrière-plans aux éléments.
L’application d’une image d’arrière-plan nécessite uniquement de spécifier son URL :
body { background-image: url(images/diagonal-pattern.png);}Le comportement de l’image (comment elle se répète, son emplacement, sa taille) est définie par d’autres propriétés d’arrière-plan. La propriété background-image ne définit que l’image à utiliser.
N’oubliez pas que l’élément HTML ne prend pas en compte les dimensions de son image d’arrière-plan. Même si l’image est plus grande que l’élément auquel elle est appliquée, l’élément ne sera pas redimensionné pour s’ajuster à l’image, car l’image est purement décorative et sert ici à supporter l’élément.
La différence entre les images HTML <img> et les images d’arrière-plan CSS
L’élément HTML <img> concerne les images faisant partie du contenu, tandis que les images d’arrière-plan CSS sont purement décoratives.
Le logo d’une entreprise, la vignette d’une galerie, l’image d’un produit… Tous ces éléments sont considérés comme du contenu et doivent utiliser l’élément HTML <img>.
Un motif en diagonale, un beau paysage, une icône représentant un panier… peuvent être considérés comme décoratifs, car ils soutiennent le contenu mais n’en font pas partie. Si elles devaient disparaître, la page Web aurait toujours un sens.
Comme pour beaucoup de choix doubles, la frontière entre contenu et style est floue. Certaines techniques visuelles sont plus faciles à réaliser avec des arrière-plans CSS. Demandez-vous simplement si l’image que vous utilisez est essentielle à la page. Si c’est le cas, utilisez l’élément <img>.
Dégradés/Gradients
CSS permet également de définir des dégradés de couleurs sous forme d’images d’arrière-plan, sous 2 formes différentes :
linear-gradient(dégradé linéaire) pour les gradients dans une seule direction, dans une forme rectangulaireradial-gradient(dégradé radial) pour des gradients dans toutes les directions, de forme circulaire.
Nous couvrons cela dans le chapitre 8.3. La seule chose à savoir pour le moment est que les dégradés de fond sont considérés comme des images de fond :
body { background-image: linear-gradient(white,grey);}position de fond/background-position
Par défaut, une image d’arrière-plan se répète indéfiniment. Vous pouvez spécifier sa position d’origine en choisissant une valeur x horizontale et une valeur verticale y.
Pour chaque coordonnée, vous utilisez soit :
- valeurs en pixels
px - pourcentages, par rapport aux dimensions de l’élément HTML
- des mots clés comme – centre, gauche, bas –
center,left,bottom…
body { background-position: right bottom;}Vous pouvez mélanger différentes unités de coordonnées :
body{ background-position: center 20px;}Répétition du fond/background-repeat
Par défaut, une image d’arrière-plan se répète indéfiniment. Vous pouvez choisir de ne le répéter qu’horizontalement, verticalement ou pas du tout.
body { background-repeat: repeat-x;} /* Répétition horizontale */
body { background-repeat: repeat-y;} /* Répétition verticale */
body< { background-repeat: no-repeat;} /* L'image de fond n'apparaîtra qu'une fois */