W3docs
it
Accedi

Proprietà CSS background-attachment

La proprietà CSS background-attachment definisce se un'immagine di sfondo scorre con la pagina, rimane fissa o scorre con il contenuto dell'elemento.

La proprietà background-attachment definisce se un'immagine di sfondo rimane fissa nella sua posizione o scorre insieme al resto della pagina. Controlla come si comporta l'immagine mentre l'utente scorre — un dettaglio fondamentale per ottenere effetti come banner fissi e parallax realizzato solo con CSS.

Questa pagina spiega ogni valore, quando utilizzare ciascuno, e l'unica insidia (su mobile) che trae spesso in inganno.

Valori

background-attachment accetta cinque valori:

  • scroll (predefinito) — lo sfondo è fisso rispetto all'elemento, quindi non si sposta mentre il contenuto interno dell'elemento scorre, ma si sposta quando la pagina scorre. In pratica si comporta come "scorre con la pagina."
  • fixed — lo sfondo è fisso rispetto al viewport. Rimane immobile mentre tutto il resto scorre, così il contenuto sembra scivolare sopra un'immagine stazionaria. Questo crea il classico effetto parallax / hero-banner.
  • local — lo sfondo è fisso rispetto al contenuto dell'elemento. Quando si scorre all'interno di un elemento con scorrimento (overflow: auto), lo sfondo scorre insieme a quel contenuto.
  • initial — reimposta la proprietà al suo valore predefinito (scroll).
  • inherit — eredita il valore dall'elemento genitore.

La differenza tra scroll e local è visibile solo su un elemento che ha la propria barra di scorrimento. Su una pagina che scorre normalmente appaiono identici.

In JavaScript il nome della proprietà DOM è in camelCase: element.style.backgroundAttachment.

Valore inizialescroll
Si applica aTutti gli elementi. Si applica anche a ::first-letter e ::first-line.
EreditataNo.
AnimabileNo.
VersioneCSS1
Sintassi DOMobject.style.backgroundAttachment = "scroll";

Sintassi

Sintassi della proprietà CSS background-attachment

background-attachment: scroll | fixed | local | initial | inherit;

Esempio della proprietà background-attachment con il valore "scroll":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 400px 100px;
      }
      .scroll-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="scroll-container">
      <p>The background-image scrolls with the viewport. Try to scroll down.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Provalo tu stesso »

Nell'esempio seguente l'immagine di sfondo è "fixed" e non si sposta con la pagina.

Esempio della proprietà background-attachment con il valore "fixed":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 400px 100px;
      }
      .scroll-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="scroll-container">
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà background-attachment con il valore "local":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .local-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: local;
        background-size: 400px 100px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="local-container">
      <p>The background-image scrolls with the element's contents, not the viewport. Try to scroll down.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà background-attachment con immagine di sfondo fissa e background-size: cover:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-image: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
        min-height: 500px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <p>Scroll the page to see the effect.</p>
    <div class="example"></div>
    <div style="height:800px;background-color:#1c87c9;"></div>
  </body>
</html>
Provalo tu stesso »

Quando usare ciascun valore

  • Usa fixed quando vuoi un'immagine hero o uno sfondo a pagina intera che rimanga immobile mentre il contenuto scorre sopra — il modo più semplice per ottenere un effetto parallax senza JavaScript.
  • Usa local quando una casella con scorrimento (un pannello chat, un listato di codice, una card con overflow: auto) deve mantenere lo sfondo ancorato al contenuto che scorre anziché alla casella stessa.
  • Lascia scroll per gli sfondi di pagina ordinari che devono scorrere naturalmente con la pagina.

Attenzione: fixed su mobile

background-attachment: fixed è scarsamente supportato sui browser mobile — in particolare iOS Safari, dove l'immagine viene resa allungata oppure il comportamento fisso viene disabilitato del tutto per ragioni di prestazioni. Se hai bisogno di un effetto parallax affidabile su mobile, usa un elemento separato con posizione fissa invece di fare affidamento su questa proprietà. Testa sempre gli sfondi fissi su un dispositivo touch reale.

Poiché la proprietà può costringere il browser a ridisegnare lo sfondo ad ogni frame di scorrimento, un uso eccessivo di fixed su immagini di grandi dimensioni può anche penalizzare le prestazioni dello scorrimento.

Proprietà correlate

background-attachment viene solitamente impostata insieme ad altre proprietà di sfondo:

Pratica

Pratica
Quali dei seguenti sono valori validi della proprietà CSS background-attachment?
Quali dei seguenti sono valori validi della proprietà CSS background-attachment?
Was this page helpful?