|
Handleiding HTML  Legenda | Voorbeelden | Kleur en achtergrond | CSS eigenschappen | Begin
background-position
|
De background-position eigenschap bepaalt de beginpositie van de achtergrondafbeelding van een element.
De beginpositie van de achtergrondafbeelding kan bepaald worden met één waarde, of met twee waarden gescheiden door een spatie. De volgende mogelijkheden zijn beschikbaar:
- één of twee percentages; als twee percentages zijn opgenomen, geldt de eerste in horizontale en de tweede in verticale richting; wanneer één percentage is opgenomen, dan geldt dit voor de horizontale richting en wordt in verticale richting 50% aangehouden;
- één of twee lengtes; als twee lengtes zijn opgenomen, geldt de eerste in horizontale en de tweede in verticale richting; wanneer één lengte is opgenomen, dan geldt dit voor de horizontale richting en wordt in verticale richting 50% aangehouden;
- een combinatie van een percentage en een lengte; de eerste waarde geldt in horizontale en de tweede in verticale richting;
- een combinatie van één van de waarden top, center en bottom en één van de waarden left, center en right; de volgorde waarin deze waarden worden opgenomen, maakt niet uit;
- één van de waarden top of bottom; in horizontale richting wordt dan uitgegaan van center;
- één van de waarden left of right; in verticale richting wordt dan uitgegaan van center;
- de waarde center;
- de waarde inherit.
In CSS 2.1 is bovendien de volgende mogelijkheid toegevoegd:
Wanneer de eigenschap gebruikt wordt in combinatie met de background-repeat eigenschap met de waarde repeat-x, dan wordt de achtergrondafbeelding zowel naar rechts als naar links herhaald. In combinatie met de background-repeat eigenschap met de waarde repeat-y wordt de achtergrondafbeelding zowel naar beneden als naar boven herhaald. In combinatie met de background-repeat eigenschap met de waarde repeat wordt de achtergrondafbeelding over de hele achtergrond van het element herhaald. Het hangt van de achtergrondafbeelding af, of deze laatste combinatie tot een ander resultaat leidt dan in de situatie dat de background-position eigenschap niet gebruikt zou zijn.
Voorbeelden:
background-position: 65% 80%;
background-position: 30% 50px;
background-position: 40px top;
background-position: center;
De volgende waarden en combinaties van waarden hebben dezelfde betekenis:
| top |
top center
center top |
50% 0% |
|
| bottom |
bottom center
center bottom |
50% 100% |
|
| left |
left center
center left |
0% 50% |
0% |
| right |
right center
center right |
100% 50% |
100% |
| center |
center center |
50% 50% |
50% |
| |
top left
left top |
0% 0% |
|
| |
top right
right top |
100% 0% |
|
| |
bottom left
left bottom |
0% 100% |
|
| |
bottom right
right bottom |
100% 100% |
|
|
<percentage>
|
Een percentage wordt uitgedrukt als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de breedte van het element zelf.
Als twee percentages zijn opgenomen, geldt de eerste in horizontale en de tweede in verticale richting. Wanneer slechts één percentage is opgenomen, dan geldt dit voor de horizontale richting en wordt in verticale richting 50% aangehouden.
Negatieve waarden zijn toegestaan.
Een percentage mag gecombineerd worden met een lengte, of met één van de waarden top, bottom, center, left of right.
De percentages hebben betrekking op zowel het element als de achtergrondafbeelding: een met de percentages bepaald punt in de afbeelding moet samenvallen met een met dezelfde percentages bepaald punt in de achtergrond van het element. Gerekend wordt vanaf de linkerbovenhoek van de afbeelding en de linker bovenhoek van het element. De combinatie 0% 0% betekent dat de linker bovenhoek van de afbeelding geplaatst wordt in de linker bovenhoek van het element. De combinatie 100% 100% plaatst de rechter benedenhoek van de afbeelding in de rechter benedenhoek van het element. Een combinatie van 60% 80% betekent dat het punt in de afbeelding op 60% van de linkerkant en 80% van de bovenkant van de afbeelding, moet samenvallen met het punt op 60% van de linkerkant en 80% van de bovenkant van het element.
|
<lengte>
|
De lengte wordt uitgedrukt als combinatie van een getal en een eenheid.
Als twee lengtes zijn opgenomen, geldt de eerste in horizontale en de tweede in verticale richting. Wanneer slechts één lengte is opgenomen, dan geldt dit voor de horizontale richting en wordt in verticale richting 50% aangehouden.
Negatieve waarden zijn toegestaan.
Een lengte mag gecombineerd worden met een percentage, of met één van de waarden top, bottom, center, left of right.
De lengtes hebben betrekking op de linker bovenhoek van zowel het element als de achtergrondafbeelding.
|
top
|
De bovenrand van de achtergrondafbeelding valt samen met de bovenrand van het element.
De waarde kan alleen, in combinatie met één van de waarden left, center of right, of in combinatie met een lengte of een percentage gebruikt worden.
Wanneer de waarde alleen wordt opgenomen, dan wordt in horizontale richting center aangehouden.
|
bottom
|
De onderrand van de achtergrondafbeelding valt samen met de onderrand van het element.
De waarde kan alleen, in combinatie met één van de waarden left, center of right, of in combinatie met een lengte of een percentage gebruikt worden.
Wanneer de waarde alleen wordt opgenomen, dan wordt in horizontale richting center aangehouden.
|
left
|
De linkerrand van de achtergrondafbeelding valt samen met de linkerrand van het element.
De waarde kan alleen, in combinatie met één van de waarden top, center of bottom, of in combinatie met een lengte of een percentage gebruikt worden.
Wanneer de waarde alleen wordt opgenomen, dan wordt in verticale richting center aangehouden.
|
right
|
De rechterrand van de achtergrondafbeelding valt samen met de rechterrand van het element.
De waarde kan alleen, in combinatie met één van de waarden top, center of bottom, of in combinatie met een lengte of een percentage gebruikt worden.
Wanneer de waarde alleen wordt opgenomen, dan wordt in verticale richting center aangehouden.
|
center
|
Het midden van de achtergrondafbeelding valt samen met het midden van het element.
De waarde kan zowel op de horizontale als de verticale richting betrekking hebben.
De waarde kan alleen, in combinatie met één van de waarden top, bottom, center, left of right, of in combinatie met een lengte of een percentage gebruikt worden.
Wanneer de waarde alleen wordt opgenomen, dan geldt hij voor beide richtingen.
|
inherit
|
De waarde van het parent element wordt aangehouden.
|
Bijzonderheden ondersteuning
- Microsoft Internet Explorer 4.0
- - Wanneer de eigenschap gebruikt wordt in combinatie met de background-repeat eigenschap met één van de waarden repeat, repeat-x of repeat-y, dan wordt de afbeelding vanuit de beginpositie alleen naar rechts en/of naar beneden herhaald.
- Opera 3.5 t/m 6.0
- - De waarde center center wordt weergegeven als top center.
- Opera 7.0 en hoger
- - De eigenschap wordt niet ondersteund voor het TR element.
Legenda | Voorbeelden | Kleur en achtergrond | CSS eigenschappen | Begin
Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 16 januari 2005
|
