introduzione

Possiamo determinare la dimensione dell'immagine di sfondo con l'aiuto della proprietà background-size. Possiamo rendere l'immagine a sinistra, allungata e adattata allo spazio disponibile. Esistono moltissime sintassi per l'implementazione della proprietà background-size. Possiamo impostare la proprietà della dimensione dello sfondo con l'aiuto di valori e valori unitari.

Nei valori unitari, possiamo definire la proprietà della dimensione dello sfondo sotto forma di percentuali o pixel. Possiamo definirlo anche con l’aiuto del valore globale. Possiamo implementarlo con l'aiuto del valore globale attraverso l'aiuto dello snippet seguente.

apurva padgaonkar

 .card-hero inherit 

Capiamo brevemente l'argomento.

Valori delle parole chiave

Possiamo utilizzare il valore della parola chiave con l'aiuto di cover e contiene. Possiamo modificare la dimensione dello sfondo con l'aiuto di questi valori di parole chiave.

1. Copertina:

Possiamo impostare la dimensione dello sfondo con l'aiuto della parola chiave cover. Se definiamo la dimensione dello sfondo come una copertina, l'immagine entrerà nel contenitore senza lasciare spazio. Migliorerà anche l'immagine per adattarla allo schermo.

Cerchiamo di capirlo con l'aiuto dell'esempio seguente.

Esempio 1:

Codice:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Produzione

trasforma la stringa in int

Spiegazione:

Nel codice precedente, tre immagini di sfondo vengono combinate utilizzando la proprietà background-image. La proprietà background-size specifica le dimensioni di ciascuna immagine di sfondo: larghezza 30% per la prima immagine, larghezza 40% per la seconda immagine e copertina per la terza immagine. La proprietà della posizione dello sfondo è impostata in modo diverso per ciascuna immagine per creare una composizione equilibrata.