Lorsque vous concevez un site web, l'arrière-plan est un élément essentiel pour créer une ambiance visuelle et améliorer l'expérience utilisateur. Pour définir l'arrière-plan en CSS, nous utilisons la propriété background
. Dans cet article nous allons parler plus concrètement de : background-color
, background-image
, background-repeat
.
Note: Il existe plusieurs autres propriétés pour définir les arrières plan telles que background-clip
, background-size
... Mais, ici, nous allons nous limiter aux trois ci-dessus précitées.
1. Couleurs d'arrière-plan
La méthode la plus simple pour définir un arrière-plan est d'utiliser une couleur unie. Vous pouvez le faire en utilisant la propriété "background-color
" suivie du nom de la couleur ou du code hexadécimal. Par exemple :
body {
background-color: #f2f2f2;
}
Note : il y a plusieurs façons de spécifier une couleur de . Les plus rependues sont : l’appeler par son nom en anglais (red
, marron
, yellow
…), indiquer son code hexadécimal (#ffffff
), l’identifier par la méthode RGB et RGBA…
2. Dégradés d'arrière-plan
Les dégradés sont une autre option populaire pour les arrière-plans. Ils permettent de créer des transitions fluides entre deux couleurs ou plus. Vous pouvez utiliser la propriété "background-image
" avec la valeur "linear-gradient
" pour définir un dégradé linéaire. Par exemple :
body {
background-image: linear-gradient(to bottom, #ff0000, #0000ff);
}
3. Images d'arrière-plan
Si vous souhaitez utiliser une image comme arrière-plan, vous pouvez utiliser la propriété "background-image
" avec la valeur "url
" suivie de l'URL de l'image. Par exemple :
body {
background-image: url("chemin/vers/image.jpg");
}
Vous pouvez également spécifier d'autres options pour l'image d'arrière-plan, telles que la position, la répétition et la taille, en utilisant les propriétés "background-position
", "background-repeat
" et "background-size
".
4. Motifs d'arrière-plan
Les motifs sont des images répétées pour créer un effet de motif sur l'arrière-plan. Vous pouvez utiliser la propriété "background-image
" avec la valeur "url
" pour spécifier l'image du motif, et la propriété "background-repeat
" pour définir la répétition du motif. Par exemple :
body {
background-image: url("chemin/vers/motif.png");
background-repeat: repeat;
}
5. Utilisation de la propriété Background seule
Il est aussi possible d'utiliser la propriété Background
sans spécifier un autre élément après lui. Par exemple :
background: red;
Cette façon est peu usitée, mais peut s'avérer utile dans certaines circonstances.
Conclusion
Ce sont quelques-unes des options les plus couramment utilisées pour définir des arrière-plans en CSS. Vous pouvez les combiner et les personnaliser selon vos besoins pour créer des designs uniques et attrayants pour votre site web.
Top comments (0)