Egenskaben background-attachment

Egenskaben background-attachment angiver hvorledes baggrundsbilledet for et element skal scrolles: med teksten eller om teksten skal glide over billedet.

Syntaks

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

Værdier

Værdi	Beskrivelse
`fixed`	Baggrundsbilledet vil være ubevægeligt, og teksten vil glide over det.
`scroll`	Baggrundsbilledet vil scrolles sammen med teksten.
`local`	Baggrunden fastgøres under hensyntagen til elementets adfærd. Hvis elementet har scrollning, vil baggrunden blive scrollet sammen med indholdet, men baggrunden, der går ud over elementets rammer, forbliver på plads.

Standardværdi: scroll.

Eksempel . Værdien scroll

Nu er egenskaben background-attachment sat til værdien scroll. Scroll elementet vertikalt - du vil se, hvordan teksten scroller sammen med baggrunden:

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

Результат:

Eksempel . Værdien fixed

Og nu er egenskaben background-attachment sat til værdien fixed. Scroll elementet vertikalt - du vil se, hvordan teksten glider over baggrunden:

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 også

egenskaben background,
som er en sammentrækningsegenskab for baggrunden