Vlastnosť background-attachment

Vlastnosť background-attachment určuje, ako sa má posúvať obrázok pozadia elementu: spolu s textom alebo či má text posúvať cez obrázok.

Syntax

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

Hodnoty

Hodnota	Popis
`fixed`	Obrázok pozadia bude nepohyblivý a text sa bude posúvať cez neho.
`scroll`	Obrázok pozadia sa bude posúvať spolu s textom.
`local`	Pozadie je fixované s ohľadom na správanie sa elementu. Ak má element posúvanie, potom sa pozadie bude posúvať spolu s obsahom, ale pozadie, ktoré prekračuje rámec elementu, zostane na mieste.

Predvolená hodnota: scroll.

Príklad . Hodnota scroll

Teraz je vlastnosť background-attachment nastavená na hodnotu scroll. Posúvajte element zvisle - uvidíte, ako sa text posúva 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;
}

Результат:

Príklad . Hodnota fixed

A teraz je vlastnosť background-attachment nastavená na hodnotu fixed. Posúvajte element zvisle - uvidíte, ako sa text posúva cez pozadie:

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

Результат:

Pozri tiež

vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie