Właściwość background-attachment

Właściwość background-attachment określa sposób przewijania obrazu tła elementu: razem z tekstem lub tekst będzie przesuwał się po obrazie.

Składnia

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

Wartości

Wartość	Opis
`fixed`	Obraz tła będzie nieruchomy, a tekst będzie się po nim przesuwał.
`scroll`	Obraz tła będzie przewijany razem z tekstem.
`local`	Tło jest ustalane z uwzględnieniem zachowania elementu. Jeśli element ma przewijanie, tło będzie przewijane razem z treścią, ale tło wykraczające poza granice elementu pozostaje na miejscu.

Wartość domyślna: scroll.

Przykład . Wartość scroll

Teraz właściwość background-attachment jest ustawiona na wartość scroll. Przewiń element w pionie - zobaczysz, jak tekst przewija się razem z tłem:

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;
}

Результат:

Przykład . Wartość fixed

A teraz właściwość background-attachment jest ustawiona na wartość fixed. Przewiń element w pionie - zobaczysz, jak tekst przesuwa się po tle:

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;
}

Результат:

Zobacz też

właściwość background,
która jest właściwością-skórtem dla tła