kursetabel

CSS reference manual

CSS egenskab

Valgfri kursus

Kursus Anbefaling:

CodeW3C.com's Urselebringskasse

CSS background-position-x property

forrige side background-position
Næste side background-position-y

Definition og brug

background-position-x Egenskaben sætter baggrundsbilledets position på x-aksen.

Tip:Som standard placeres baggrundsbilledet i elementets øverste venstre hjørne og gentages både lodret og vandret.

Eksempel

Eksempel 1

Sådan placerer man baggrundsbilledet på x-aksen:

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

Try it yourself

Eksempel 2

Sådan placerer man baggrundsbilledet til højre:

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

Try it yourself

Eksempel 3

Sådan bruges procentsats-baseret baggrundsbilled定位:

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

Try it yourself

Eksempel 4

Sådan bruges pixel-baseret baggrundsbilled定位:

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

Try it yourself

Eksempel 5

Opret en baggrundsbillede, der dækker sin container, ved at bruge forskellige baggrundsegenskaber:

.hero-image {
  background-image: url("photographer.jpg"); /* Brugt billede */
  background-color: #cccccc; /* If the image is not available, use this color */
  height: 300px; /* Must set height */
  background-position-x: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Adjust the size of the background image to cover the entire container */
}

Try it yourself

CSS syntax

background-position-x: value;

attribute value

Value	Description
left	position the background at the left of the x-axis.
right	position the background at the right of the x-axis.
center	position the background at the center of the x-axis.
x%	The left of the x-axis is 0%, and the right is 100%. percentage values refer to the width of the background positioning area minus the width of the background image.
xpos	horizontal distance from the left. Units can be pixels (such as 0px) or others CSS units.
xpos offset	double-value syntax, supported only in Firefox and Safari. xpos set to left or right offset is the horizontal distance from the left or right of the background image units can be pixels or others CSS units.
initial	set this property to its default value. See initial.
inherit	inherit this property from its parent element. See inherit.

Technical details

default value:	0%
inheritance:	no
Animation creation:	supported. See:animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.backgroundPositionX="center"