Ominaisuus background-attachment

Ominaisuus background-attachment määrittää kuinka elementin taustakuva vieritetään: yhdessä tekstin kanssa vai liukuuko teksti kuvan päällä.

Syntaksi

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

Arvot

Arvo	Kuvaus
`fixed`	Taustakuva pysyy paikallaan ja teksti liukuu sen päällä.
`scroll`	Taustakuva vieritetään yhdessä tekstin kanssa.
`local`	Tausta kiinnitetään ottaen huomioon elementin käyttäytyminen. Jos elementillä on vieritys, tausta vieritetään sisällön mukana, mutta elementin rajojen ulkopuolelle ulottuva tausta pysyy paikallaan.

Oletusarvo: scroll.

Esimerkki . Arvo scroll

Nyt ominaisuus background-attachment on asetettu arvoon scroll. Vieritä elementtiä pystysuunnassa - näet kuinka teksti vierii taustan mukana:

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

Результат:

Esimerkki . Arvo fixed

Nyt ominaisuus background-attachment on asetettu arvoon fixed. Vieritä elementtiä pystysuunnassa - näet kuinka teksti liukuu taustan päällä:

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

Результат:

Katso myös

ominaisuus background,
joka on lyhennysominaisuustausta