Répétition de fond

3.1 Propriété background-repeat

Les propriétés background-repeat et background-size en CSS sont utilisées pour contrôler comment les images d'arrière-plan se répètent et se redimensionnent à l'intérieur des éléments. Ces propriétés offrent aux développeurs web des outils flexibles pour créer des arrière-plans visuellement attractifs. Examinons-les plus en détail.

La propriété background-repeat détermine comment les images d'arrière-plan se répètent dans un élément. Par défaut, l'image d'arrière-plan se répète à la fois horizontalement et verticalement.

Valeurs

• repeat: l'image se répète horizontalement et verticalement (par défaut)
• repeat-x: l'image se répète uniquement horizontalement
• repeat-y: l'image se répète uniquement verticalement
• no-repeat: l'image ne se répète pas

1. Valeur repeat :

L'image se répète horizontalement et verticalement.

    
      .repeat {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat">Répétition horizontalement et verticalement</div>
    
  

2. Valeur repeat-x :

L'image se répète horizontalement.

    
      .repeat-x {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat-x;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-x">Répétition uniquement horizontalement</div>
    
  

3. Valeur repeat-y :

L'image se répète verticalement.

    
      .repeat-y {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: repeat-y;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-y">Répétition uniquement verticalement</div>
    
  

4. Valeur no-repeat :

L'image ne se répète pas.

    
      .no-repeat {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-repeat: no-repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="no-repeat">Sans répétition</div>
    
  

Explication du code

• .repeat: l'image se répète horizontalement et verticalement, remplissant tout l'élément
• .repeat-x: l'image se répète uniquement horizontalement
• .repeat-y: l'image se répète uniquement verticalement
• .no-repeat: l'image ne se répète pas et s'affiche une seule fois

3.2 Propriété background-size

La propriété background-size contrôle la taille de l'image d'arrière-plan. Elle permet de redimensionner l'image pour qu'elle s'adapte mieux à l'élément.

Valeurs :

• auto: la taille de l'image est déterminée automatiquement (par défaut)
• cover: l'image est redimensionnée pour couvrir entièrement l'élément, en conservant ses proportions
• contain: l'image est redimensionnée pour s'intégrer entièrement à l'élément, en gardant ses proportions
• Valeurs absolues: par exemple, 100px 50px définissent la largeur et la hauteur de l'image en pixels
• Valeurs en pourcentage: par exemple, 50% 50% définissent la largeur et la hauteur de l'image en pourcentages par rapport à la taille de l'élément

1. Taille par défaut (auto):

La taille de l'image est déterminée automatiquement (par défaut).

    
      .size-auto {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/50');
        background-size: auto;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-auto">Taille par défaut (auto)</div>
    
  

2. cover :

L'image est redimensionnée pour couvrir entièrement l'élément, en conservant ses proportions.

    
      .size-cover {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-cover">Redimensionnement pour couvrir l'élément (cover)</div>
    
  

3. contain :

L'image est redimensionnée pour s'intégrer entièrement à l'élément, en gardant ses proportions.

    
      .size-contain {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: contain;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-contain">Redimensionnement pour s'intégrer (contain)</div>
    
  

4. Valeurs absolues :

Par exemple, 100px 50px définissent la largeur et la hauteur de l'image en pixels.

    
      .size-pixels {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: 100px 50px;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-pixels">Taille en pixels (100px 50px)</div>
    
  

5. Valeurs en pourcentage :

Par exemple, 50% 50% définissent la largeur et la hauteur de l'image en pourcentages par rapport à la taille de l'élément.

    
      .size-percent {
        width: 200px;
        height: 200px;
        background-image: url('https://via.placeholder.com/150');
        background-size: 50% 50%;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-percent">Taille en pourcentages (50% 50%)</div>
    
  

Explication du code :

• .size-auto: la taille de l'image est déterminée automatiquement
• .size-cover: l'image est redimensionnée pour couvrir entièrement l'élément, en conservant ses proportions. Des parties de l'image peuvent être coupées
• .size-contain: l'image est redimensionnée pour s'intégrer entièrement à l'élément, en gardant ses proportions. L'image sera entièrement visible, mais des zones vides peuvent apparaître
• .size-pixels: la taille de l'image est définie en pixels (100px de largeur et 50px de hauteur)
• .size-percent: la taille de l'image est définie en pourcentage par rapport à la taille de l'élément (50% de largeur et 50% de hauteur)

3.3 Utilisation conjointe de background-repeat et background-size

Les propriétés background-repeat et background-size sont souvent utilisées ensemble pour obtenir l'effet souhaité d'affichage des images d'arrière-plan.

Exemple d'utilisation :

    
      .combined {
        width: 300px;
        height: 300px;
        background-image: url('https://via.placeholder.com/150');
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <body>
        <div class="combined">L'image d'arrière-plan ne se répète pas et est redimensionnée pour couvrir l'élément</div>
      </body>
    
  

Explication du code :

• background-repeat: no-repeat;: l'image ne se répète pas
• background-size: cover;: l'image est redimensionnée pour couvrir entièrement l'élément, en conservant ses proportions. Des parties de l'image peuvent être coupées