DEV Community

Cover image for Courte introduction à la propriété background en CSS3
Tacite WAKILONGO for KADEA ACADEMY

Posted on • Edited on

Courte introduction à la propriété background en CSS3

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

Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Retry later

Top comments (0)

Retry later
Retry later