Al giorno d'oggi sono richiesti siti Web con immagini di sfondo reattive. I siti Web reattivi offrono agli utenti un'esperienza utente ideale su quasi tutti i dispositivi, inclusi cellulari, tablet o desktop. Le immagini reattive possono adattare lo sfondo del sito Web, le dimensioni dello schermo e le dimensioni. Le immagini reattive garantiscono il mantenimento della qualità e delle proporzioni. Inoltre, il sito Web con immagini di sfondo reattive si carica rapidamente.
Questa guida fornirà istruzioni per adattare le immagini di sfondo alle dimensioni dello schermo.
Come adattare le immagini di sfondo alle dimensioni dello schermo?
L'immagine può adattarsi alle dimensioni dello schermo seguendo le istruzioni passo passo fornite di seguito.
Passaggio 1: crea una struttura HTML
Innanzitutto, crea una struttura HTML e aggiungi il foglio di stile esterno utilizzando il file
< html >
< Testa >
< collegamento rel = 'foglio di stile' href = 'stile.css' >
< titolo > Immagine di sfondo reattiva titolo >
Testa >
< corpo >
-- Area per aggiungere altri contenuti-- >
corpo >
html >
Passaggio 2: applica i CSS
Ora applica il CSS al ' corpo ' sezione. Innanzitutto, specifica l'immagine di sfondo. A tale scopo, utilizzare il ' immagine di sfondo ' e specificare il ' URL() 'valore contenente l'indirizzo del file immagine.
Successivamente, utilizzare il ' immagine di sfondo ' per specificare la dimensione dell'immagine, il ' ripetizione dello sfondo ' proprietà per impostare la ripetizione dell'immagine e ' allegato in background ' per impostare se l'immagine scorre o meno con il resto della pagina. Infine, imposta il ' margine ' E ' imbottitura ' A ' 0 ':
corpo {immagine di sfondo: URL ( 'immagine-prova.jpg' ) ;
dimensione dello sfondo: 100 % 100 % ;
/* Ridimensiona l'immagine 100 % larghezza e 100 % altezza */
ripetizione in background: nessuna ripetizione;
allegato in background: risolto;
margine: 0 ;
imbottitura: 0 ;
/* Opzionale: sfondo fisso */
}
Produzione
Questo è l'output prima di contrarre la finestra del browser:
Dopo la contrazione del browser:
L'output sopra conferma che l'immagine ha adattato lo sfondo alle dimensioni dello schermo.
Conclusione
Per adattare le immagini di sfondo alle dimensioni dello schermo, includere innanzitutto il ' vista ' nella sezione principale per controllare le dimensioni e il ridimensionamento. Quindi, crea una struttura HTML e applica i CSS. Nei CSS, imposta ' dimensione dello sfondo 'valore della proprietà al' copertina ' per ridimensionare l'altezza e la larghezza di un'immagine. Questo articolo ha presentato una guida completa per adattare le immagini di sfondo alle dimensioni dello schermo.