Sintassi

Significato dei valori principali:

• scroll: il comportamento predefinito. L'immagine di sfondo si muove insieme al contenuto durante lo scroll della pagina.

• fixed: l'immagine di sfondo rimane fissa rispetto alla finestra di visualizzazione, indipendentemente dallo scroll della pagina.

• local: l'immagine di sfondo si muove con il contenuto dell'elemento, ma rimane fissa quando si scrollano gli altri contenuti esterni all'elemento.

Esempio proprietà: background-attachment

Codice Esempio: background-attachment

CODE: CSS

1. .background-attachment-example {

2.   background: url('https://example.com/image,jpg') no-repeat center center;

3.   background-attachment: fixed;

4.   padding: 100px;

5.   color: white;

6.   font-size: 22px;

7.   text-align: center;

8.   background-size: cover;

9. }

Contenuto Esempio: background-attachment

  
  <style>
    .background-attachment-example {
      background: url('https://example.com/image.jpg') no-repeat center center;
      background-attachment: fixed; /* immagine di sfondo fissa durante lo scroll */
      padding: 100px;
      color: white;
      font-size: 22px;
      text-align: center;
      background-size: cover;
    }
  </style>

  <div class="background-attachment-example">
    L'immagine di sfondo rimane fissa mentre scorri
  </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