La propriété CSS background-size

La propriété CSS background-size spécifie la taille de l'images de l’arrière plan d’un élément.

Les propriétés CSS

Définition et utilisation de la propriété CSS background-size

La propriété background-size définie la taille de l'images de fond c'est-à-dire  l’arrière plan d’un élément.

Valeur par défaut :

Auto

Héritée :

ne

Animer :

Oui. Découvrez animatable L'essayer

Version:

CSS3

Syntaxe JavaScript :

objet. style.backgroundSize="60px 120px" L'essayer

Astuce : La propriété background-size est généralement utilisée pour créer des images de fond qui peuvent évoluer selon la taille de la fenêtre d'affichage ou  la largeur du navigateur.

Appui de navigateurs de la propriété CSS background-size

Les nombres dans le tableau spécifient la version à partir du quelle  le navigateur prend totalement en charge la propriété background-size.

Propriété  | Navigateur

Google Chrome

Internet Explorer

Firefox

Safari

Opera

background-clip

4.0

9.0

4.0

4.1

10.5

Syntaxe  de la propriété CSS background-size

La syntaxe de la propriété est donnée comme suit :

background-size: auto|length|cover|contain|initial|inherit;

Valeurs de propriété  CSS background-size

Valeur

Description

auto

Valeur par défaut. L’image est affichée dans toute sa largeur et hauteur

length

Deux nombres qui définissent  la largeur et la hauteur de l'image de fond. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est réglée sur "Auto"

Exemple : background-size:100px 100px;

 

percentage

Deux pourcentages qui définissent la largeur et la hauteur de l'image d'arrière-plan en pour cent de l'élément parent. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est réglé sur "Auto"

Exemple : background-size:70% 500%;

 

cover

Échelle de l'image d'arrière-plan pour être aussi grand que possible de sorte que la zone de fond est complètement recouverte par l'image de fond. Il se peut que certaines parties de l'image d'arrière-plan ne peuvent pas être en vue dans la zone de positionnement de fond

contain

Echelonne l'image à la plus grande taille tels que sa largeur et sa hauteur peuvent s’adapter à l'intérieur de la zone de contenu

initial

Définit cette propriété à sa valeur par défaut.

inherit

Hérite  cette propriété de son élément parent.

Exemple :  

Sélectionner le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de la propriété CSS background-size</title>
<style type="text/css">
.boite {
        width: 250px;
        height: 150px;
        background:url("http://nospetitstresors.cowblog.fr/images/PaysagesetNature/paysage067.jpg") no-repeat;
     	background-size: cover;
      	border: 6px dashed #222;
}
</style>
</head>
<body>
    <div class="boite"></div>
</body>
</html>

 

Remarque: Dans l’exemple la taille originale de l'image de fond est 580x406 pixels, mais en utilisant la propriété background-size nous sommes encore en mesure de montrer l'image complète à l'intérieur de la petite boîte.

Par Gerywa 11 Janvier 2016
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Texte et typographie de Bootstrap Typographie

    Bootstrap définit des styles et le formatage de contenu de texte par default comme les titres, paragraphes, blocs de citation, etc

    border-left-style

    Définit le style de la bordure gauche

    Balise table

    Définit une table