Couleur de Fond CSS

Dans ce tutoriel, nous allons couvrir les bases de l'ajout de couleurs de fond en utilisant le CSS à des éléments avec des largeurs fixes et variables. En bonus, nous allons également démontrer comment créer parfaits carrés de couleur réagissant avec seulement quelques lignes de code!

Couleur corps de fond

En CSS le fond est considérée comme la largeur et la hauteur d'un élément, plus tout marges et les bordures (mais pas les marges). Utilisation de la propriété CSS background-color nous pouvons colorer le <body> fond de notre page HTML rouge. 

HTML

<head>
  <style>
    body { background-color: #FF0000; }
  </style>
</head>
<body>
</body>
Démo sur Codepen

Assez simple, non! Bien sûr, vous pouvez toujours utiliser un ID ou classe pour donner l'élément <body> une couleur de fond, mais cette méthode est la plus simple. Ensuite, nous allons examiner quelques techniques pour colorer l'arrière-plan des éléments de page, comme un <div>.

Taille fixe la couleur élément de fond

Pour les éléments HTML qui sont d'une taille fixe - que ce soit en pixels, EMS ou des pourcentages - l'ajout d'une couleur de fond est facile. Nous ne pouvons tout simplement utiliser le code CSS de l'étape précédente pour donner à notre <div> de la largeur et la hauteur fixe un fond bleu. 

HTML

<head>
  <style>
    div { 
      width: 50%;
      height: 200px;
      background-color: #00FF00; 
    }
  </style>
</head>
<body>
  <div></div>
</body>
Démo sur Codepen

Si nous supprimons la hauteur ou la largeur à partir du code CSS cependant, la couleur de fond disparaît. Essayez vous-même dans la démo.

Taille variable couleur élément de fond

Ok super, mais si nous ne connaissons pas la taille de notre élément HTML? Tant qu'il y est un élément à l'intérieur de celui que vous souhaitez ajouter un fond aussi, nous pouvons utiliser la propriété CSS de rembourrage pour donner l'élément extérieur un peu de couleur. 

HTML

<head>
  <style>
    div {
      padding: 16px;
      background-color: #00FF00;
    }
  </style>
</head>
<body>
  <div>
    <h1>Title with a background color</h1>
  </div>
</body>
Démo sur Codepen

Carrés de couleur adaptatifs

Cette technique utilise une combinaison de positionnement et de largeur fixe avec un rembourrage pour créer un carré parfait adaptatifs avec une couleur de fond. Vous pouvez effectivement créer des rectangles de tout juste proportion en faisant varier la propriété CSS padding-bottom. 

HTML

<head>
  <style>
    .outer { 
      position: relative;
      width: 25%;
      padding-bottom: 25%;
    }
    .inner {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #00FF00; 
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
Démo sur Codepen

Si vous avez trouvé cela utile vous invitons à consulter nos autres tutoriels CSS couleur de texte, couleur de lien et couleur de l'espace réservé.