Couleurs et fond en CSS

Dans les propriétés CSS indispensables à connaître, il y a bien sûr la couleur, et le background (le fond). Nous allons donc voir comment modifier la teinte d’un texte, comment ajouter une image ou une couleur en arrière-plan. Mais nous allons aussi découvrir de quelle manière ajouter un peu plus d’effets avec la transparence.

La propriété color

Pour modifier la couleur d’un texte dans le contenu d’une page Web, la propriété CSS correspondante est color. Par exemple si vous désirez que les texte de vos paragraphes soient en rouge, vous devrez écrire ce genre de code dans votre CSS :
p
{
     color : red;
}

Cependant il existe différentes manières d’écrire les couleurs :

• donner le nom de la couleur en anglais, et oui, la langue des codeurs c’est l’anglais donc il mieux d’avoir quelques notions d’anglais, l’avantage est que cette technique est simple, le défaut est qu’elle est limitée à quelques couleurs (16 principales et quelques autres qui ne fonctionnent pas forcément sur tous les navigateurs)
• indiquer une couleur en hexadécimale : dans notre quotidien nous utilisons la base décimale pour compter, les chiffre de 0à à 9 (10 chiffres -> base 10). En base hexadécimale, on sera en base 16, et pour ajouter les 6 chiffres qu’il manque par rapport à la base 10, on utilise des lettres : A, B, C, D, E et F. Pour écrire une couleur en hexadécimale, on la commence toujours par un #. Dans notre exemple, à la place de red, la notation hexadécimale est : #FF0000.
• indiquer une couleur en encodage RGB : ces trois lettres correspondent à 3 couleurs : red (rouge) green (vert) blue (bleu). Chaque couleur qui existe peut-être exprimée en fonction de ces trois là. On indiquera donc 3 nombres compris entre 0 et 255 correspondant à ces trois couleurs. Dans notre exemple, si on veut du rouge on remplacera red par rgb(255,0,0).

Pour ces deux dernières méthode, il est bien entendu évident qu’on ne peut deviner ni retenir les formules correspondant aux couleurs souhaiter. Il existe des sites où vous pouvez retrouver facilement la formule de la couleur que vous souhaiter obtenir. Vous pouvez tester https://www.w3schools.com/colors/colors_picker.asp ou http://www.code-couleur.com/ qui sont mes favoris.

 

Ajouter de la transparence

Pour ajouter de la transparence à une couleur, la manière la plus simple est de reprendre la notation en rgb. Si vous ne la connaissez pas, vous pouvez vous rendre à cette adresse, vous avez juste à écrire le nom ou la notation en hexadécimale de votre couleur et le convertisseur vous la donnera en rgb. Une fois avec votre couleur en rgb, vous allez remplacer rgb par rgba, et ajouter une quatrième valeur, un nombre compris entre 0 et 1, ou avec 0 on ne voit rien (transparence totale) et avec 1 on voit tout (transparence nulle).
Donc, toujours avec notre exemple du paragraphe en rouge, si on veut une transparence de 50%, on aura à écrire :
p
{
  color : rgba(255,0,0, 0.5);
}

 

Mettre un fond dans un site Web

Couleur de fond

Pour donner une couleur de fond, il y a deux propriétés CSS possibles.

• background qui est général
• background-color qui est spécifique aux couleurs

Lorsque ces deux propriétés sont utilisée sur un même élément, le background prendra toujours la priorité.
Par exemple :
header
{
       backgroud-color : red ;
       background : grenn;
}
Dans ce cas présent le fond du header sera donc vert.
Lorsque ces propriétés sont utilisées sur deux éléments qui ont une relation parent-enfant, comme toutes les autres, la propriété de l’élément enfant sera prioritaire. Voyez plutôt l’exemple ci-dessous qui illustre cette situation :

Image de fond

Dans le cas d’une image, on se retrouve dans la même situation qu’avec les couleurs, deux solutions :
background ou background-image.
La valeur de la propriété sera cette fois-ci le chemin ou l’adresse de l’image voulue :
body
{
     background-image : url(monimage.jpg);
}
Dans ce cas, nous avons pris une image située dans le répertoire de la page, on pourrait aussi bien prendre une image sur internet en y mettant son adresse Web.
On peut utiliser une image de fond sur la plupart des éléments, cependant on l’utilise principalement sur le body.

 

Propriétés complémentaires pour les images de fond

Afin de perfectionner une page Web, on peut ajouter des propriétés aux images de fond. Cela permet de donner plus de style et d’effets.

Fixer le fond

Avec la propriété background-attachment, on peut immobiliser le fond. Ainsi, on obtient un effet intéressant en défilant le texte qui va « glisser » par dessus le fond. Cette propriété n’a que deux valeurs disponible :

• fixed : l’image de fond reste fixe ;
• scroll : l’image de fond défile avec le texte (par défaut).

Répéter le fond

Par défaut, une image de fond est répétée. Mais avec la propriété background-repeat, on peut changer cet effet :

• no-repeat : le fond ne sera pas répété. L’image sera donc unique sur la page;
• repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement;
• repeat-y : le fond sera répété uniquement sur la première colonne, verticalement;
• repeat : le fond sera répété en mosaïque (par défaut).

Position du fond

On utilisera cette propriété surtout en la combinant avec background-repeat : no-repeat, autrement elle n’est pas intéressante. On peut donner la position avec deux valeurs en pixel par rapport au coin supérieur gauche de la page.
En tapant background-position :  10px 25px; votre fond sera placé à 10 pixels de la gauche et à 25 pixels du haut. Mais on peut également utiliser des valeurs en anglais, seules ou combinées :

• top : en haut ;
• bottom : en bas ;
• left : à gauche ;
• center : centré ;
• right : à droite.

Si je veux un fond en haut à droite je vais coder :
background-position :  top right;

Propriété générale

Il est possible d’utiliser toutes ces propriétés en même temps, de les combiner. Pour gagner du temps, au lieu de les taper toutes une par une, on va utiliser la propriété background, et lui attribuer les valeurs des autres propriétés. Par exemple, si je veux mettre un éclair en haut à droite, qui ne se répète pas et soit toujours visible je peux écrire :

body
{
               background : url(« eclair.png ») fixed no-repeat top right ;

}

Dans le cas où je désire mettre deux images, par exemple un fond avec de la pluie comme première image, et un éclair en haut à droite comme deuxième image, il suffira de mettre en premier l’image qui sera « sur » l’autre, ici donc l’éclair suivi de ses propriétés, une virgule puis la pluie suivi de ses propriétés, ainsi on aura un code de la forme :

body
{
               background : url(« eclair.png ») fixed no-repeat top right, url(« pluie.png ») fixed ;
}

Pour vous résumer

• On change la couleur du texte avec la propriété color, la couleur de fond avec background-color.
• On peut indiquer une couleur en écrivant son nom en anglais (red, par exemple), sous forme hexadécimale (#26CC11) ou en notation RGB (rgb(26,11,250)).
• On peut ajouter une image de fond avec background-image.
• On peut choisir de fixer l’image de fond, de l’afficher en mosaïque ou non, et même de la positionner où on veut sur la page.
• On peut rendre une portion de la page transparente avec la notation RGBa (identique à la notation RGB, avec une quatrième valeur indiquant le niveau de transparence).

J’espère que ce court vous a plu. N’hésitez pas à laisser un commentaire, JB.