Propriedade background-attachment

A propriedade background-attachment define como a imagem de fundo de um elemento deve ser rolada: junto com o texto ou se o texto deve deslizar sobre a imagem.

Sintaxe

cssseletor {
  background-attachment: fixed | scroll | local;
}

Valores

Valor	Descrição
`fixed`	A imagem de fundo permanecerá fixa, e o texto deslizará sobre ela.
`scroll`	A imagem de fundo será rolada junto com o texto.
`local`	O fundo é fixado considerando o comportamento do elemento. Se o elemento tiver rolagem, o fundo será rolado junto com o conteúdo, mas o fundo que ultrapassa os limites do elemento permanece no lugar.

Valor padrão: scroll.

Exemplo . Valor scroll

Agora a propriedade background-attachment está definida como scroll. Role o elemento verticalmente - você verá como o texto é rolado junto com o fundo:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Exemplo . Valor fixed

Agora a propriedade background-attachment está definida como fixed. Role o elemento verticalmente - você verá como o texto desliza sobre o fundo:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Veja também

a propriedade background,
que é uma propriedade abreviada para o fundo