Hintergrundwiederholung

3.1 Eigenschaft background-repeat

Die Eigenschaften background-repeat und background-size in CSS werden verwendet, um zu steuern, wie Hintergrundbilder innerhalb von Elementen wiederholt und skaliert werden. Diese Eigenschaften bieten Webentwicklern flexible Werkzeuge, um visuell ansprechende Hintergründe zu erstellen. Schauen wir uns jedes dieser Eigenschaften genauer an.

Die Eigenschaft background-repeat legt fest, wie Hintergrundbilder in einem Element wiederholt werden. Standardmäßig wird das Hintergrundbild sowohl horizontal als auch vertikal wiederholt.

Werte

• repeat: Das Bild wird sowohl horizontal als auch vertikal wiederholt (Standard)
• repeat-x: Das Bild wird nur horizontal wiederholt
• repeat-y: Das Bild wird nur vertikal wiederholt
• no-repeat: Das Bild wird nicht wiederholt

1. Wert repeat:

Wiederholt das Bild horizontal und vertikal.

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

    
      <div class="repeat">Wiederholung horizontal und vertikal</div>
    
  

2. Wert repeat-x:

Wiederholt das Bild horizontal.

    
      .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">Wiederholung nur horizontal</div>
    
  

3. Wert repeat-y:

Wiederholt das Bild vertikal.

    
      .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">Wiederholung nur vertikal</div>
    
  

4. Wert no-repeat:

Das Bild wird nicht wiederholt.

    
      .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">Ohne Wiederholung</div>
    
  

Erklärung des Codes

• .repeat: Das Bild wird horizontal und vertikal wiederholt und füllt das gesamte Element aus
• .repeat-x: Das Bild wird nur horizontal wiederholt
• .repeat-y: Das Bild wird nur vertikal wiederholt
• .no-repeat: Das Bild wird nicht wiederholt und nur einmal angezeigt

3.2 Eigenschaft background-size

Die Eigenschaft background-size steuert die Größe des Hintergrundbildes. Sie ermöglicht es, die Größe des Bildes zu ändern, damit es besser in das Element passt.

Werte:

• auto: Die Größe des Bildes wird automatisch bestimmt (Standard)
• cover: Das Bild wird skaliert, um das Element vollständig zu bedecken, wobei die Proportionen erhalten bleiben
• contain: Das Bild wird skaliert, um vollständig in das Element zu passen, wobei die Proportionen erhalten bleiben
• Absolute Werte: Zum Beispiel 100px 50px geben Breite und Höhe des Bildes in Pixeln an
• Prozentwerte: Zum Beispiel 50% 50% geben Breite und Höhe des Bildes in Prozent der Größe des Elements an

1. Standardgröße (auto):

Die Größe des Bildes wird automatisch bestimmt (Standard).

    
      .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">Standardgröße (auto)</div>
    
  

2. cover:

Das Bild wird skaliert, um das Element vollständig zu bedecken, wobei die Proportionen erhalten bleiben.

    
      .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">Skaliert, um das Element zu bedecken (cover)</div>
    
  

3. contain:

Das Bild wird skaliert, um vollständig in das Element zu passen, wobei die Proportionen erhalten bleiben.

    
      .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">Skaliert, um vollständig zu passen (contain)</div>
    
  

4. Absolute Werte:

Zum Beispiel geben 100px 50px die Breite und Höhe des Bildes in Pixeln an.

    
      .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">Größe in Pixeln (100px 50px)</div>
    
  

5. Prozentwerte:

Zum Beispiel geben 50% 50% die Breite und Höhe des Bildes in Prozent der Größe des Elements an.

    
      .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">Größe in Prozent (50% 50%)</div>
    
  

Erklärung des Codes:

• .size-auto: Die Größe des Bildes wird automatisch bestimmt
• .size-cover: Das Bild wird skaliert, um das Element vollständig zu bedecken, wobei die Proportionen erhalten bleiben. Teile des Bildes können abgeschnitten werden
• .size-contain: Das Bild wird skaliert, um vollständig in das Element zu passen, wobei die Proportionen erhalten bleiben. Das Bild wird vollständig sichtbar sein, aber es können leere Bereiche vorhanden sein
• .size-pixels: Die Größe des Bildes ist in Pixeln angegeben (100px in der Breite und 50px in der Höhe)
• .size-percent: Die Größe des Bildes ist in Prozent der Größe des Elements angegeben (50% in der Breite und 50% in der Höhe)

3.3 Gemeinsame Verwendung von background-repeat und background-size

Die Eigenschaften background-repeat und background-size werden oft zusammen verwendet, um den gewünschten Effekt bei der Darstellung von Hintergrundbildern zu erzielen.

Anwendungsbeispiel:

    
      .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">Hintergrundbild wird nicht wiederholt und auf die Größe des Elements skaliert</div>
      </body>
    
  

Erklärung des Codes:

• background-repeat: no-repeat;: Das Bild wird nicht wiederholt
• background-size: cover;: Das Bild wird skaliert, um das gesamte Element zu bedecken, wobei die Proportionen erhalten bleiben. Teile des Bildes können abgeschnitten werden