CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS background

La proprietà CSS background imposta lo sfondo di un elemento

La proprietà background è una delle proprietà shorthand che consente di definire vari aspetti dello sfondo di un elemento in un'unica dichiarazione. Può essere usata per impostare il colore di sfondo, l'immagine, la posizione, la ripetizione, la dimensione e l'origine. Questa proprietà semplifica la gestione dello stile di sfondo e consente di combinare più dichiarazioni in un'unica riga di codice.

Sintassi

background: color | image | position | size | repeat | origin | clip;

Significato dei valori principali:

  • color: imposta il colore di sfondo dell'elemento. Può essere un colore predefinito (come red), un valore esadecimale (#ff0000) o un valore RGB (rgb(255, 0, 0)).

  • image: imposta un'immagine come sfondo. Può essere un URL che punta all'immagine desiderata.

  • position: determina la posizione dell'immagine di sfondo all'interno dell'elemento. Può essere un valore in percentuale (50% 50%) o parole chiave come top, center, bottom, left, right.

  • size: definisce la dimensione dell'immagine di sfondo. I valori possono essere auto, cover (per riempire l'elemento) o contain (per mantenere le proporzioni dell'immagine).

  • repeat: specifica come l'immagine di sfondo deve essere ripetuta. Può essere repeat, no-repeat, repeat-x o repeat-y.


Esempio proprietà: background


Codice Esempio: background

CODE: CSSpreleva codice
  1. .background-example {
  2.   background: #3498db url('https://example.com/image.jpg') no-repeat center center / cover;
  3.   padding: 50px;
  4.   color: white;
  5.   text-align: center;
  6.   font-size: 20px;
  7.   border-radius: 10px;
  8. }

Contenuto Esempio: background

Esempio di utilizzo di background

In questo esempio, lo sfondo dell'elemento viene impostato con un colore di base, un'immagine di sfondo e alcune altre proprietà di personalizzazione:


Esempio di un elemento con sfondo personalizzato

CSS e HTML per l'elemento con sfondo:

  
  <style>
    .background-example {
      background: #3498db url('https://example.com/image800x200.jpg') no-repeat center center / cover;
      padding: 50px;
      color: white;
      text-align: center;
      font-size: 20px;
      border-radius: 10px;
    }
  </style>

  <div class="background-example">
    Esempio di un elemento con sfondo personalizzato
  </div>
  

Esempio background doppia immagine

In questo esempio, lo sfondo dell'elemento viene impostato con un'immagine di sfondo primaria ed una seconda immagine sovrapposta secondaria:


Esempio di un elemento con doppio sfondo

CSS e HTML per l'elemento con doppia sfondo:

  
  <style>
  .background-example2 {

	background:
       /* Immagine in primo piano (logo) */
       url('https://example.com/logo.png') no-repeat center center,
	   
       /* Immagine di sfondo */
       url('https://example.com/image800x200.jpg') no-repeat center center / cover;

    height:190px;
    padding: 10px 10px 0px 10px;
    color: white;
    text-align: center;
    font-size: 20px;
    border-radius: 10px;
  }
  </style>

  <div class="background-example">
    Esempio di un elemento con doppio sfondo
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies