Ripetizione del fondo

3.1 Proprietà background-repeat

Le proprietà background-repeat e background-size in CSS vengono utilizzate per controllare come le immagini di sfondo si ripetono e si scalano all'interno degli elementi. Queste proprietà forniscono agli sviluppatori web strumenti flessibili per creare sfondi visivamente accattivanti. Vediamole più in dettaglio.

La proprietà background-repeat definisce come le immagini di sfondo si ripetono in un elemento. Per impostazione predefinita, l'immagine di sfondo si ripete sia orizzontalmente che verticalmente.

Valori

• repeat: l'immagine si ripete orizzontalmente e verticalmente (default)
• repeat-x: l'immagine si ripete solo orizzontalmente
• repeat-y: l'immagine si ripete solo verticalmente
• no-repeat: l'immagine non si ripete

1. Valore repeat:

Ripete l'immagine orizzontalmente e verticalmente.

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

    
      <div class="repeat">Ripetizione orizzontale e verticale</div>
    
  

2. Valore repeat-x:

Ripete l'immagine orizzontalmente.

    
      .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">Ripetizione solo orizzontale</div>
    
  

3. Valore repeat-y:

Ripete l'immagine verticalmente.

    
      .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">Ripetizione solo verticale</div>
    
  

4. Valore no-repeat:

L'immagine non si ripete.

    
      .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">Senza ripetizione</div>
    
  

Spiegazione del codice

• .repeat: l'immagine si ripete sia orizzontalmente che verticalmente, riempiendo tutto l'elemento
• .repeat-x: l'immagine si ripete solo orizzontalmente
• .repeat-y: l'immagine si ripete solo verticalmente
• .no-repeat: l'immagine non si ripete e viene visualizzata solo una volta

3.2 Proprietà background-size

La proprietà background-size gestisce la dimensione dell'immagine di sfondo. Consente di ridimensionare l'immagine in modo che si adatti meglio all'elemento.

Valori:

• auto: la dimensione dell'immagine viene determinata automaticamente (default)
• cover: l'immagine viene scalata per coprire completamente l'elemento, mantenendo le proporzioni
• contain: l'immagine viene scalata per adattarsi completamente all'elemento, mantenendo le proporzioni
• Valori assoluti: ad esempio, 100px 50px impostano larghezza e altezza dell'immagine in pixel
• Valori percentuali: ad esempio, 50% 50% impostano larghezza e altezza dell'immagine in percentuale rispetto alla dimensione dell'elemento

1. Dimensione predefinita (auto):

La dimensione dell'immagine viene determinata automaticamente (default).

    
      .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">Dimensione predefinita (auto)</div>
    
  

2. cover:

L'immagine viene scalata per coprire completamente l'elemento, mantenendo le proporzioni.

    
      .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">Ridimensionamento fino a coprire l'elemento (cover)</div>
    
  

3. contain:

L'immagine viene scalata per adattarsi completamente all'elemento, mantenendo le proporzioni.

    
      .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">Ridimensionamento per adattarsi completamente (contain)</div>
    
  

4. Valori assoluti:

Ad esempio, 100px 50px impostano larghezza e altezza dell'immagine in pixel.

    
      .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">Dimensione in pixel (100px 50px)</div>
    
  

5. Valori percentuali:

Ad esempio, 50% 50% impostano larghezza e altezza dell'immagine in percentuale rispetto alla dimensione dell'elemento.

    
      .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">Dimensione percentuale (50% 50%)</div>
    
  

Spiegazione del codice:

• .size-auto: la dimensione dell'immagine viene determinata automaticamente
• .size-cover: l'immagine viene scalata per coprire completamente l'elemento, mantenendo le proporzioni. Parti dell'immagine possono essere tagliate
• .size-contain: l'immagine viene scalata per adattarsi completamente all'elemento, mantenendo le proporzioni. L'immagine sarà visibile interamente, ma potrebbero esserci aree vuote
• .size-pixels: la dimensione dell'immagine è impostata in pixel (100px in larghezza e 50px in altezza)
• .size-percent: la dimensione dell'immagine è impostata in percentuale rispetto alla dimensione dell'elemento (50% in larghezza e 50% in altezza)

3.3 Uso combinato di background-repeat e background-size

Le proprietà background-repeat e background-size vengono spesso utilizzate insieme per ottenere l'effetto desiderato nella visualizzazione delle immagini di sfondo.

Esempio di utilizzo:

    
      .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'immagine di sfondo non si ripete e viene scalata per coprire l'elemento</div>
      </body>
    
  

Spiegazione del codice:

• background-repeat: no-repeat;: l'immagine non si ripete
• background-size: cover;: l'immagine viene scalata per coprire completamente l'elemento, mantenendo le proporzioni. Parti dell'immagine possono essere tagliate