CSS background-position egenskap

Definition och användning

background-position Egenskapen ställer in bakgrundsbildens startposition.

Denna egenskap ställer in bakgrundsbilden (av background-image Definition）的位置，om bakgrundsbilden ska upprepas, kommer den från denna punkt att börja.

Tips:Du behöver sätta background-attachment-attributet till "fast" för att säkerställa att egenskapen fungerar korrekt i Firefox och Opera.

Se också:

CSS-tutorial:CSS bakgrund

CSS referenshandbok:background-image-attributet

HTML DOM referenshandbok:backgroundPosition-attributet

Exempel

Hur man placerar bakgrundsbilden:

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

Prova själv

CSS syntax

background-position: value;

Egenskapsvärde

Värde Beskrivning
  • överst till vänster
  • överst mitt
  • överst till höger
  • mitt till vänster
  • mitt mitt
  • mitt till höger
  • nederst till vänster
  • nederst mitt
  • nederst till höger

Om du bara anger ett nyckelord, kommer det andra värdet att vara "center".

Standardvärde: 0% 0%.
x% y%

Det första värdet är horisontell position, det andra värdet är vertikal position.

Överst till vänster är 0% 0%. Nederst till höger är 100% 100%.

Om du bara anger ett värde, kommer det andra värdet att vara 50%.
xpos ypos

Det första värdet är horisontell position, det andra värdet är vertikal position.

Överst till vänster är 0 0. Enheten är pixlar (0px 0px) eller någon annan CSS-enhet.

Om du bara anger ett värde, kommer det andra värdet att vara 50%.

Du kan blanda använda % och positioneringsvärden.

Tekniska detaljer

Standardvärde: 0% 0%
Inherrskande: no
Version: CSS1
JavaScript syntax: object.style.backgroundPosition="center"

Mer exempel

Hur man använder % för att placera bakgrundsbilden
Detta exempel visar hur man använder procentandelar för att placera bakgrundsbilden på sidan.
Hur man använder pixlar för att placera bakgrundsbilden
Detta exempel visar hur man använder pixlar för att placera bakgrundsbilden på sidan.

Webbläsarstöd

Tabellen siffror anger den första webbläsarversion som helt stöder egenskapen.

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