W3docs
pt
Entrar

Propriedade CSS background-attachment

A propriedade CSS background-attachment define se uma imagem de fundo rola com a página, permanece fixa ou rola com o conteúdo do elemento.

A propriedade background-attachment define se uma imagem de fundo permanece fixa no lugar ou rola junto com o restante da página. Ela controla como a imagem se comporta enquanto o usuário rola — um detalhe pequeno que é o ingrediente principal por trás de efeitos como banners fixos e parallax somente com CSS.

Esta página explica cada valor, quando usar cada um, e o único problema (mobile) que costuma pegar as pessoas de surpresa.

Valores

background-attachment aceita cinco valores:

  • scroll (padrão) — o fundo é fixado ao elemento, portanto não se move enquanto o próprio conteúdo do elemento rola, mas se move quando a página rola. Na prática, comporta-se como "rola com a página".
  • fixed — o fundo é fixado ao viewport. Ele permanece parado enquanto todo o resto rola, fazendo com que o conteúdo pareça deslizar sobre uma imagem estacionária. É o que cria o clássico efeito de parallax / banner hero.
  • local — o fundo é fixado ao conteúdo do elemento. Ao rolar dentro de um elemento rolável (overflow: auto), o fundo rola junto com esse conteúdo.
  • initial — redefine a propriedade para o seu valor padrão (scroll).
  • inherit — assume o valor do elemento pai.

A diferença entre scroll e local só aparece em um elemento que possui sua própria barra de rolagem. Em uma página com rolagem normal, eles parecem iguais.

Em JavaScript, o nome da propriedade DOM é em camelCase: element.style.backgroundAttachment.

Valor Inicialscroll
Aplica-se aTodos os elementos. Também se aplica a ::first-letter e ::first-line.
HerdadoNão.
AnimávelNão.
VersãoCSS1
Sintaxe DOMobject.style.backgroundAttachment = "scroll";

Sintaxe

Sintaxe da propriedade CSS background-attachment

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

Exemplo da propriedade background-attachment com o valor "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>
Experimente Você Mesmo »

No exemplo a seguir, a imagem de fundo é "fixed" e não se move com a página.

Exemplo da propriedade background-attachment com o valor "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>
Experimente Você Mesmo »

Exemplo da propriedade background-attachment com o valor "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>
Experimente Você Mesmo »

Exemplo da propriedade background-attachment com imagem de fundo fixa 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>
Experimente Você Mesmo »

Quando usar cada valor

  • Use fixed quando quiser uma imagem hero ou fundo de página inteira que permaneça parado enquanto o conteúdo rola sobre ela — a maneira mais simples de obter um efeito estilo parallax sem JavaScript.
  • Use local quando uma caixa rolável (um painel de chat, uma listagem de código, um card com overflow: auto) deve manter seu fundo fixo ao conteúdo que rola, e não à caixa em si.
  • Deixe em scroll para fundos de página comuns que devem se mover naturalmente com a página.

Atenção: fixed no mobile

background-attachment: fixed tem suporte precário em navegadores mobile — especialmente no iOS Safari, onde a imagem é renderizada esticada ou o comportamento fixo é desativado por completo por razões de desempenho. Se precisar de um efeito parallax confiável no mobile, use um elemento com posição fixa separado em vez de depender desta propriedade. Sempre teste fundos fixos em um dispositivo touch real.

Como a propriedade pode forçar o navegador a repintar o fundo a cada quadro de rolagem, o uso excessivo de fixed em imagens grandes também pode prejudicar o desempenho da rolagem.

Propriedades relacionadas

background-attachment geralmente é definida junto com outras propriedades de fundo:

Prática

Prática
Quais dos seguintes são valores válidos da propriedade CSS background-attachment?
Quais dos seguintes são valores válidos da propriedade CSS background-attachment?
Was this page helpful?