Egenskapen background-attachment

Egenskapen background-attachment anger hur bakgrundsbilden för ett element ska rullas: tillsammans med texten eller om texten ska glida över bilden.

Syntax

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

Värden

Värde	Beskrivning
`fixed`	Bakgrundsbilden kommer att vara orörlig, och texten kommer att glida över den.
`scroll`	Bakgrundsbilden kommer att rullas tillsammans med texten.
`local`	Bakgrunden fixeras med hänsyn till elementets beteende. Om elementet har en rullningslist, kommer bakgrunden att rullas tillsammans med innehållet, men bakgrunden som går utanför elementets ramar förblir på plats.

Standardvärde: scroll.

Exempel . Värdet scroll

Nu är egenskapen background-attachment satt till värdet scroll. Rulla elementet vertikalt - du kommer att se hur texten rullas tillsammans med bakgrunden:

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

Результат:

Exempel . Värdet fixed

Och nu är egenskapen background-attachment satt till värdet fixed. Rulla elementet vertikalt - du kommer att se hur texten glider över bakgrunden:

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

Результат:

Se även

egenskapen background,
som är en genvägsegenskap för bakgrunden