Comment changer la couleur d’arrière-plan avec CSS

Hibou Gourou

L'un des moments les plus excitants de la carrière de tout développeur front-end en herbe est d'apprendre à changer la couleur d'arrière-plan d'une page Web.

Travailler avec du HTML, c'est bien, mais avec seulement quelques lignes de CSS, vous pouvez donner vie à vos pages et à votre parcours de programmation.

Ce guide couvrira tout ce que vous devez savoir sur la façon de changer la couleur d'arrière-plan avec CSS.

Préparez-vous

Supprimons un petit travail préliminaire.

Remarque : je recommande d'utiliser Visual Studio Code avec l' extension Live Server pour afficher les modifications en temps réel lorsque vous mettez à jour le HTML et le CSS.

  1. Créez un dossier pour les fichiers de votre projet.
  2. Créez un fichier index.html pour héberger votre HTML. Vous pouvez utiliser du code standard ou simplement configurer des balises <html> , <head> et <body> .
  3. Créez un fichier styles.css pour votre CSS.
  4. Liez votre fichier CSS au HTML en plaçant <link rel = "stylesheet" href = "styles.css"> à l'intérieur des balises <head> .

Vous êtes maintenant prêt à commencer à modifier le CSS.

Connexes: Comment créer un site Web de chaudières

Comment changer la couleur d'arrière-plan avec CSS

Le moyen le plus simple de modifier la couleur d'arrière-plan consiste à cibler la balise body . Ensuite, modifiez la propriété background-color . Vous pouvez trouver des codes de couleur en recherchant et en utilisant l'extension de navigateur Google Color Picker

 body {
 background-color: rgb(191, 214, 255);
 }

Ce code change l'arrière-plan en un joli bleu clair.

La propriété background-color accepte les couleurs sous six formes différentes:

  • nom : lightskyblue; (pour une approximation proche)
  • code hexadécimal : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); où a est alpha (opacité)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); où a est alpha (opacité)

Utilisez la propriété de fond de raccourci à la place de background-color pour couper du code supplémentaire. Vous pouvez modifier la couleur d'arrière-plan de n'importe quel élément HTML à l'aide de cette méthode.

Créez un élément <div> et attribuez-lui une classe – dans ce cas, la classe est panel . Définissez ses propriétés de hauteur et de largeur dans CSS. Sélectionnez l'élément en CSS et coloriez-le.

 body {
 background-color: rgb(191, 214, 255);
 }
 .container{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 90vh;
 }
 .panel {
 background: rgb(255, 148, 148);
 height: 10rem;
 width: 30%;
 }
 .muo-text {
 font-size: 3em;
 font-weight: bolder;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 position: absolute;
 }

Ici, vous pouvez voir que la propriété d' arrière- plan du corps est stylée indépendamment de la propriété d' arrière-plan .panel .

La propriété background accepte également les dégradés:

 body {
 background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
 }

fond dégradé css avec panneau Comment changer l'image d'arrière-plan dans CSS

Que faire si vous voulez que l'arrière-plan soit une image plutôt qu'une couleur unie ou un dégradé? La propriété d' arrière-plan de la sténographie est un ami familier.

Assurez-vous que l'image se trouve dans le même dossier que vos fichiers HTML et CSS. Sinon, vous devrez utiliser le chemin du fichier entre parenthèses plutôt que simplement le nom:

 body {
 background: url(leaves-and-trees.jpg)
 }

Whoah! On dirait que l'image est trop agrandie. Vous pouvez résoudre ce problème avec la propriété background-size .

 body {
 background: url(leaves-and-trees.jpg);
 background-size: cover;
 }

Pour utiliser la propriété background- shorthand en conjonction avec la propriété background-size cover , vous devez également spécifier les propriétés background-position et séparer les valeurs par une barre oblique inverse (même s'il s'agit de valeurs de position par défaut telles que le coin supérieur gauche .)

 body {
 background: url(leaves-and-trees.jpg) top left / cover;
 }

Voilà! Une image d'arrière-plan correctement dimensionnée dans une ligne de CSS.

En savoir plus: Comment définir une image d'arrière-plan en CSS

Remarque : méfiez-vous des images d'arrière-plan volumineuses qui occupent beaucoup d'espace de stockage. Ceux-ci peuvent être difficiles à charger sur mobile, où vous avez deux secondes pour donner aux utilisateurs une raison de rester sur la page.

Améliorez votre jeu CSS avec CSS box-shadow

Pour un développeur comme vous, les propriétés de couleur d'arrière-plan et d'image d'arrière-plan sont de vieilles nouvelles. Heureusement, il y a toujours quelque chose de nouveau à apprendre.

Essayez de donner un coup de pouce à vos boîtes avec CSS box-shadow. Vos éléments HTML n'ont jamais été aussi beaux!