Eigenschap background-attachment
De eigenschap background-attachment bepaalt
hoe de achtergrondafbeelding van een element
scrollt: samen met de tekst of de tekst zal
over de afbeelding glijden.
Syntaxis
selector {
background-attachment: fixed | scroll | local;
}
Waarden
| Waarde | Beschrijving |
|---|---|
fixed |
De achtergrondafbeelding zal stilstaan, en de tekst zal eroverheen glijden. |
scroll |
De achtergrondafbeelding zal samen met de tekst meescrollen. |
local |
De achtergrond wordt vastgezet rekening houdend met het gedrag van het element. Als het element scrollbaar is, dan zal de achtergrond meescrollen met de inhoud, maar de achtergrond die buiten de grenzen van het element valt, blijft op zijn plaats. |
Standaardwaarde: scroll.
Voorbeeld . Waarde scroll
Momenteel is de eigenschap background-attachment
ingesteld op de waarde scroll. Scroll het
element verticaal - u zult zien hoe de tekst
meescrollt met de achtergrond:
<body>
<div id="elem">
some long text
</div>
</body>
body {
background-attachment: scroll;
background-image: url("bg.png");
}
#elem {
width: 400px;
margin: 0 auto;
text-align: justify;
font-weight: bold;
font-size: 20px;
}
:
Voorbeeld . Waarde fixed
En nu is de eigenschap background-attachment
ingesteld op de waarde fixed. Scroll het
element verticaal - u zult zien hoe de tekst
over de achtergrond glijdt:
<body>
<div id="elem">
some long text
</div>
</body>
body {
background-attachment: fixed;
background-image: url("bg.png");
}
#elem {
width: 400px;
margin: 0 auto;
text-align: justify;
font-weight: bold;
font-size: 20px;
}
:
Zie ook
-
de eigenschap
background,
wat een verkorte eigenschap is voor de achtergrond