Comment utiliser des images en background avec du CSS ?

Si vous êtes un nouveau Web Designer, l'une des compétences que vous devez maîtriser  est l'utilisation d’images en background (arrière plan).

Votre design peut nécessiter de remplir complémentent un container CSS avec une image, mais parfois l’image que vous souhaitez intégrer ne remplit que de façon partielle ce container.

Dans ce tutoriel, vous découvrirez 3 exemples d'utilisation, du tag  CSS  background-size  

Base CSS

Pour visualiser une  image de background dans un container, utilisez l'exemple CSS ci-dessous:  

.container-class {
 background-image: url(path/to/image.jpg);
 background-repeat: no-repeat;
 background-position: center;
 width: 400px;
 height: 400px;
 border: 2px dashed #333;
}

• Remplacez .container-class par le sélecteur  que vous souhaitez personnaliser.
• border et background-position sont des propriétés optionnelles. Dans cet exemple nous les utilisons afin de montrer les différents résultats ci-dessous.

Pour définir la taille spécifique d'une image, il nous manque la propriété  background-size . Abordons cette propriété dans les étapes suivantes  

1^er exemple. Taille du background toute largeur,  mais pas toute hauteur

Dans ce cas nous utilisons une image dont la hauteur est plus grande  que sa Largeur.

Insérez la syntaxe ci-dessous pour mettre le background toute largeur :

background-size: 100% auto;

Dans l'exemple ci-dessous notez que l’image couvre toute la largeur mais pas l'hauteur totale.

2^ème exemple. Taille de background toute hauteur, mais pas toute largeur

Dans ce cas nous utilisons une image qui a une hauteur plus importante que sa largeur. 
Insérez le code ci-dessous afin que l'image soit toute hauteur : 

 background-size: auto 100%;

Dans cet exemple, notez comment l'image  couvre la hauteur totale et non sa largeur.

3^ème exemple. Un background toute largeur et toute hauteur

Insérez la syntaxe ci-dessous pour mettre l'image de background toute hauteur & toute largeur. il s'agit d'une façon automatique de remplir votre container, quel que soit son ratio d'image.

background-size: cover;

La liste des valeurs du background-size

Voici la liste complète des valeur du  background-size :

• auto - La valeur par défaut.
• length - Exemple 100% auto ou 400px auto. La première valeur est pour la largeur, la deuxième est pour la hauteur.
• cover - Couvre toute la zone du backgound, même si l'image est un peut distordue ou un peu coupé sur les bords
• contain - Dimensionne l’image  à sa plus grande dimension, même si l'image laisse un espace soit sur les cotés ou le bas ou le haut .
• initial - Mettre cette propriété à sa valeur par défaut .
• inherit - Hérité de ses parents.

Cet article est la traduction de l'article  "How to Use Images as Backgrounds with CSS" de Valentin et est autorisée par OSTraining.