• Home »
  • CSS »
  • Impostare un immagine di sfondo estesa nel sito con i CSS

Impostare un immagine di sfondo estesa nel sito con i CSS

Impostare un immagine di sfondo estesa con CSS3 è facilissimo! Ecco un altro breve tutorial che spiega passo dopo passo come impostare un immagine di sfondo estesa nel proprio sito web, adattandola automaticamente alla dimensione dello schermo, e con il solo ausilio dei CSS!

Ecco il codice CSS da utilizzare per impostare un immagine di sfondo estesa nel proprio sito web:

Clicca qui per vedere l’esempio

Ecco il codice CSS:

body
{
background: #CCC url( 'sfondo-esteso.jpg' ) no-repeat top center fixed;
background-size: cover; /* sfondo esteso */
-moz-background-size: cover; /* ombra vecchie versioni di firefox */
-webkit-background-size: cover; /* ombra vecchie versioni di opera/safari */
}

Il codice indicato sopra utilizza i CSS3 quindi i vecchi Browser potrebbero non supportare questa funzione. In questo caso l’immagine verrebbe visualizzata in alto al centro, si può risolvere semplicemente impostando un colore di sfondo simile a quello dell’immagine.

Compatibilità:

browser_ie browser_firefox browser_chrome browser_opera browser_safari

Hai delle idee o dei suggerimenti per migliorare questo articolo? Lascia un commento qui sotto!

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website