CSS background-position property

Definition og brug

background-position Egenskab for at indstille baggrundsbilledets startposition.

Denne egenskab sætter baggrundsbilledets oprindelige billede (af background-image Definitionens placering, hvis baggrundsbilledet skal gentages, starter fra dette punkt.

Tip:Du skal sætte background-attachment egenskaben til "fastfor at sikre, at egenskaben fungerer korrekt i Firefox og Opera.

Se også:

CSS undervisning:CSS Baggrund

CSS referencehåndbog:background-image egenskaben

HTML DOM referencehåndbog:backgroundPosition egenskaben

Eksempel

Sådan placeres baggrundsbilledet:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Prøv det selv

CSS syntaks

background-position: value;

Egenskabsværdi

Værdi Beskrivelse
  • øverst til venstre
  • øverst centralt
  • øverst højre
  • centralt til venstre
  • centralt centralt
  • centralt højre
  • nederst til venstre
  • nederst centralt
  • nederst højre

Hvis du kun angiver én nøgleord, vil den næste værdi være "center".

Standardværdi: 0% 0%.
x% y%

Den første værdi er den horisontale position, og den anden værdi er den vertikale position.

Øverst til venstre er 0% 0%. Nederst til højre er 100% 100%.

Hvis du kun angiver én værdi, vil den anden værdi være 50%.
xpos ypos

Den første værdi er den horisontale position, og den anden værdi er den vertikale position.

Øverst til venstre er 0 0. Enhederne er pixels (0px 0px) eller enhver anden CSS-enhed.

Hvis du kun angiver én værdi, vil den anden værdi være 50%.

Du kan blande brug af % og position værdier.

Tekniske detaljer

Standardværdi: 0% 0%
Arv: nej
Version: CSS1
JavaScript syntaks: object.style.backgroundPosition="center"

Flere eksempler

Sådan bruger man % til at placere baggrundsbilledet
Dette eksempel viser, hvordan man bruger procentværdier til at placere baggrundsbilledet på siden.
Sådan bruger man pixels til at placere baggrundsbilledet
Dette eksempel viser, hvordan man bruger pixels til at placere baggrundsbilledet på siden.

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5