Propriedade Background Attachment
Última atualização: 2026-09-13
background-attachment Propriedade Background Attachment
A propriedade background-attachment decide se uma imagem de fundo rola junto com a página. O valor padrão scroll significa que o fundo rola junto com o conteúdo do elemento; fixed fixa o fundo na viewport, produzindo um efeito de paralaxe; local faz o fundo rolar junto com o conteúdo interno do elemento. É frequentemente usada para efeitos visuais.
| Categoria | |
|---|---|
| Valor Inicial | scroll |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
background-attachment: scroll | fixed | local;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
scroll | fixed | local | Palavra-chave | Comportamento de rolagem do fundo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-attachment | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： O valor fixed fixa o fundo na viewport e é comumente usado para criar efeitos de rolagem com paralaxe.
Aviso： O background-attachment: fixed tem baixo desempenho em dispositivos móveis, e alguns navegadores móveis ignoram o valor completamente.
❓ Perguntas Frequentes
QQual é a diferença entre scroll, fixed e local em background-attachment?
AEles diferem em relação ao que o fundo é posicionado. scroll (o padrão): o fundo é posicionado em relação ao elemento e rola com ele. fixed: o fundo é fixado na viewport e permanece parado enquanto a página rola, criando um efeito de paralaxe. local: o fundo é posicionado em relação ao conteúdo interno do elemento, então ele rola quando o conteúdo interno do elemento rola, por exemplo, em um container com overflow: auto.
QComo criar um efeito de rolagem com paralaxe?
ADefina background-attachment: fixed; como o fundo fica fixado na viewport, o conteúdo em primeiro plano se move enquanto o fundo permanece parado — é essa a sensação de paralaxe. A abordagem clássica é dar a várias seções imagens de fundo diferentes com fixed, para que os fundos troquem conforme você rola. Observe que o iOS e alguns navegadores móveis ignoram fixed, então pode ser necessário um tratamento separado.
QPor que o background-attachment: fixed não funciona no celular?
APrincipalmente por desempenho. Navegadores móveis como o iOS Safari reduzem os fundos fixed para scroll a fim de economizar memória e manter a rolagem suave, então o fundo rola com o conteúdo. Soluções alternativas: use um fundo comum de largura total no celular, ou uma biblioteca de paralaxe em JS (como o Rellax) baseada em transform, e ative fixed apenas no desktop.
QQuando devo usar o valor local?
AO valor local é ideal para containers com sua própria barra de rolagem, como janelas de chat com overflow: auto, blocos de código ou listas de dados. Com background-attachment: local o fundo rola junto com o conteúdo interno em vez de ficar grudado no container, imitando visualmente uma "textura de papel que pertence ao conteúdo".
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
