Proprietà background-attachment

La proprietà background-attachment definisce come far scorrere l'immagine di sfondo di un elemento: insieme al testo o se il testo scivolerà sull'immagine.

Sintassi

cssselettore {
  background-attachment: fixed | scroll | local;
}

Valori

Valore	Descrizione
`fixed`	L'immagine di sfondo sarà fissa, mentre il testo scorrerà su di essa.
`scroll`	L'immagine di sfondo scorrerà insieme al testo.
`local`	Lo sfondo è fissato considerando il comportamento dell'elemento. Se l'elemento ha lo scorrimento, lo sfondo scorrerà insieme al contenuto, ma lo sfondo che esce dai bordi dell'elemento rimane al suo posto.

Valore predefinito: scroll.

Esempio . Valore scroll

Ora la proprietà background-attachment è impostata sul valore scroll. Scorri l'elemento verticalmente - vedrai come il testo scorre insieme allo sfondo:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Esempio . Valore fixed

E ora la proprietà background-attachment è impostata sul valore fixed. Scorri l'elemento verticalmente - vedrai come il testo scivola sullo sfondo:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Vedi anche

la proprietà background,
che è una proprietà abbreviata per lo sfondo