kursplan

CSS referensmanual

CSS egenskaper

Valfria kurser

Kursrekommendation:

CodeW3C.coms kassa

CSS background-position-x egenskap

föregående sida background-position
Nästa sida background-position-y

Definition och användning

background-position-x Egenskapen anger bakgrundsbildens position på x-axeln.

Tips:Som standard placeras bakgrundsbilden i elementets övre vänstra hörn och upprepas både vertikalt och horisontellt.

Exempel

Exempel 1

Hur man placerar bakgrundsbilden på x-axeln:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

Prova själv

Exempel 2

Hur man placerar bakgrundsbilden till höger:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

Prova själv

Exempel 3

Hur man använder procentposition för bakgrundsbild:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

Prova själv

Exempel 4

Hur man använder pixelposition för bakgrundsbild:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

Prova själv

Exempel 5

Skapa en bakgrundsbild som täcker behållaren med olika bakgrundsegenskaper:

.hero-image {
  background-image: url("photographer.jpg"); /* Använda bild */
  background-color: #cccccc; /* Använd denna färg om bilden inte är tillgänglig */
  height: 300px; /* Kräver att höjden ställs in */
  background-position-x: center; /* Centrera bilden */
  background-repeat: no-repeat; /* Upprepa inte bilden */
  background-size: cover; /* Justera storleken på bakgrundsbilden för att täcka hela behållaren */
}

Prova själv

CSS syntax

background-position-x: value;

Egenskapsvärde

Värde	Beskrivning
left	Placera bakgrundspositionen på vänster sida av x-axeln.
right	Placera bakgrundspositionen på höger sida av x-axeln.
center	Placera bakgrundspositionen i mitten av x-axeln.
x%	Vänster sida på x-axeln är 0%, höger sida är 100%. Procentvärden refererar till bredden på bakgrundspositionsområdet minus bredden på bakgrundsbilden.
xpos	Horisontell avstånd från vänster sida. Enheter kan vara pixlar (t.ex. 0px) eller andra CSS enheter.
xpos offset	tvåvärdes syntax, endast stödd i Firefox och Safari. xpos sätt till left eller right offset är horisontell avstånd från vänster eller höger sida av bakgrundsbilden Enheter kan vara pixlar eller andra CSS enheter.
initial	Sätt denna egenskap till dess standardvärde. Se: initial.
inherit	Arv denna egenskap från föräldrelementet. Se: inherit.

Tekniska detaljer

Standardvärde:	0%
Arv:	nej
Animeringsproduktion:	Stödd. Se:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript syntax:	object.style.backgroundPositionX="center"