Propriedade background-attachment: Fundo fixo ou rolante

Entenda como fazer o fundo rolar com a página ou permanecer fixo.

Você já sabe como colocar uma imagem de fundo, controlar sua repetição, posição e tamanho. Agora, vamos adicionar mais uma camada de controle: como essa imagem se comporta quando o usuário rola a página. É para isso que serve a propriedade background-attachment.

A propriedade background-attachment define se a imagem de fundo de um elemento rola com o conteúdo do elemento ou se permanece fixa na viewport (a janela visível do navegador).

Pense na background-attachment como decidir se o papel de parede da sua sala rola junto com a tela de um projetor (conteúdo) ou se ele fica parado enquanto você move a tela para cima e para baixo.

Como usar a propriedade background-attachment

A sintaxe é simples, com apenas alguns valores-chave.

Sintaxe:

seletor {
  background-attachment: valor;
}

Valores possíveis:

  1. scroll (padrão): A imagem de fundo rola junto com o conteúdo do elemento (e, consequentemente, com a página). Se o elemento tiver uma barra de rolagem própria, a imagem rola com o conteúdo dentro desse elemento.

    • Uso: É o comportamento mais comum e esperado para a maioria dos fundos.

  2. fixed: A imagem de fundo permanece fixa na viewport (a janela visível do navegador). Ela não rola com o conteúdo do elemento nem com a página. O efeito é que o conteúdo "passa por cima" da imagem de fundo.

    • Uso: Cria um efeito de paralaxe sutil e elegante, onde o fundo parece estar em uma camada diferente do conteúdo. É muito usado em seções de "hero" ou para criar um fundo geral para o site.

  3. local: A imagem de fundo rola com o conteúdo do elemento, mas apenas se o próprio elemento tiver um mecanismo de rolagem (por exemplo, overflow: scroll;). Se o elemento não tiver rolagem própria, ele se comporta como scroll.

    • Uso: Menos comum, mas útil quando você tem um elemento com conteúdo rolante e quer que a imagem de fundo role com esse conteúdo interno, e não com a viewport.

Exemplos Práticos:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Background Attachment</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      height: 2000px; /* Para forçar a rolagem da página */
      background-color: #f0f0f0; /* Cor de fallback */
    }
    .section {
      height: 400px;
      margin-bottom: 30px;
      color: white;
      text-align: center;
      padding-top: 150px;
      font-size: 2em;
      background-image: url("https://via.placeholder.com/1200x600/007bff/fff?text=Fundo+Exemplo");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .scroll-box {
      width: 80%;
      height: 300px;
      margin: 50px auto;
      border: 2px solid #333;
      overflow: scroll; /* Habilita a rolagem interna */
      background-color: #ccc;
      background-image: url("https://via.placeholder.com/600x600/28a745/fff?text=Fundo+Interno");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: top left;
      color: #333;
      text-align: left;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="section section-scroll">
    Conteúdo Rola com o Fundo (Padrão)
  </div>

  <div class="section section-fixed">
    Conteúdo Rola, Fundo Fixo
  </div>

  <div class="scroll-box section-local">
    <h3>Caixa com Rolagem Interna</h3>
    <p>Este é um texto longo para demonstrar a rolagem interna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Mais texto para preencher a caixa e forçar a rolagem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>E mais um pouco. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="section section-scroll">
    Outra Seção (Rola com o Fundo)
  </div>
</body>
</html>

Agora, vamos aplicar os estilos background-attachment:

.section-scroll {
  background-attachment: scroll; /* Comportamento padrão */
}

.section-fixed {
  background-attachment: fixed; /* A imagem de fundo ficará fixa na viewport */
}

.section-local {
  background-attachment: local; /* A imagem de fundo rolará com o conteúdo interno da caixa */
}

Resultado:

  • Ao rolar a página, o fundo da .section-scroll rolará junto com o conteúdo.
  • O fundo da .section-fixed permanecerá parado na tela, enquanto o conteúdo da página (incluindo as outras seções) rola por cima dele.
  • Dentro da .scroll-box, ao rolar o conteúdo interno da caixa, a imagem de fundo da própria caixa rolará junto com esse conteúdo.

Propriedade Abreviada (background)

Como sempre, você pode incluir background-attachment na propriedade abreviada background.

Exemplo:

.section-fixed {
  background: url("https://via.placeholder.com/1200x600/007bff/fff?text=Fundo+Exemplo") no-repeat center / cover fixed;
}

A propriedade background-attachment adiciona um toque dinâmico e profissional ao seu design, permitindo criar efeitos visuais interessantes e melhorar a experiência de navegação do usuário.