Vlastnost background-attachment

Vlastnost background-attachment určuje, jak scrollovat obrázek na pozadí elementu: spolu s textem nebo zda bude text klouzat po obrázku.

Syntaxe

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

Hodnoty

Hodnota	Popis
`fixed`	Obrázek na pozadí bude nehybný a text po něm bude klouzat.
`scroll`	Obrázek na pozadí bude scrollovat spolu s textem.
`local`	Pozadí je fixováno s ohledem na chování elementu. Pokud má element scrollování, pozadí bude scrollovat spolu s obsahem, ale pozadí přesahující rámec elementu zůstane na místě.

Výchozí hodnota: scroll.

Příklad . Hodnota scroll

Nyní je vlastnost background-attachment nastavena na hodnotu scroll. Scrollujte elementem svisle - uvidíte, jak text scrolluje spolu s pozadím:

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

Результат:

Příklad . Hodnota fixed

A nyní je vlastnost background-attachment nastavena na hodnotu fixed. Scrollujte elementem svisle - uvidíte, jak text klouzá po pozadí:

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

Результат:

Viz také

vlastnost background,
která představuje zkratkovou vlastnost pro pozadí