Nel codice css è possibile trovare a volte la proprietà “background-size” e chiedersi quale sia la sua funzione all’interno del codice.
A cosa serve “background-size” nel css?
Come già anticipato “background-size” è una proprietà del css, questa viene utilizzata per descrivere al browser le modalità di specifica delle dimensioni delle immagini in background.
I comandi possibili per questa tipologia di codice sono “background-size: cover;”, “background-size: auto;”, “background-size: contain;”, il valore numerico dove la prima cifra è la lunghezza e la seconda l’altezza, ovvero ad esempio “background-size: 100px 200px;”.
Descrizione dei valori
- Con “contain” l’immagine i sfondo sarà impostata dal browser per essere completamente visibile, solo, però, potrebbe non coprire l’intero spazio di sfondo dell’elemento, appunto per questo motivo, e lasciare degli spazi bianchi.
- Con “cover” verrà coperta l’intera area dell’elemento su cui è inserito lo sfondo.
- Con “auto” l’immagine verrà visualizzata come sfondo secondo le sue dimensioni originali.
- Un’ultimo valore è “percentage”, tramite cui l’immagine viene impostata in percentuale per altezza e larghezza.