<< Typografiark menu Opdateret d. 6.6.2002

background-position

Mulige værdier:[ [<procent> | <længde> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] |
Brug af værdier:Der er både mulighed for at benytte procenter, længder og nøgleord.
Benyttes med:HTML koder på blok niveau, og elementer som selv definerer en størrelse (eksempelvis et billede eller en flash-animation)

Med egenskaben background-position kan man angive nøjagtig hvor et baggrundsbillede skal placeres.
Dette kan ske på følgende måder:

VærdiHorisontaltVertikaltPlacering i skærmbillede
Procent50%20%Procentvis placering
Længde100px400pxPlacering med længde
NøgleordlefttopPlacering vha. nøgleord

Som det fremgår, er der rig mulighed for at få sit billede placeret, man skal dog være opmærksom på hvad man vælger. Det er bedst at placere billedet vha. procent eller nøgleord. Da vil billedet nemlig placere sig på samme måde, uanset hvilken skærmopløsning der benyttes.
Bruger man en angivelse i pixel, skal man være opmærksom på at billedet vil flyttes sig mod venstre eller højre hvis læseren benytter en henholdsvis større eller mindre opløsning end den siden blev kodet i.

Man må gerne kombinere procenter og længder som f.eks.:

Eksempel på brug af procent/længde

BODY { background-image: url("billeder/solnedgang.jpg");
       background-position: 50% 100px }

Man kan også nøjes med at angive én værdi, der så automatisk vil gælde for den horisontale placering.

Man må ikke kombinere hverken procenter eller længder med nøgleord. Brug af nøgleord kan se således ud:

Eksempel på brug af nøgleord

BODY { background-image: url("billeder/solnedgang.jpg");
       background-position: top left }