CSS background-position-x ominaisuus

edellinen sivu background-position
Seuraava sivu background-position-y

Määrittely ja käyttötapa

background-position-x Asettaa taustakuvan sijainnin akselilla x.

Vinkki:Oletuksena taustakuva sijoittuu elementin vasempaan yläkulmaan ja toistuu sekä pystysuunnassa että vaakasuunnassa.

Esimerkki

Esimerkki 1

Miten taustakuvan pisteasento asetetaan akselilla x:

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

Kokeile itse

Esimerkki 2

Miten taustakuvan pisteasento asetetaan oikealle:

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

Kokeile itse

Esimerkki 3

Miten taustakuvan pisteasento käytetään prosentteina:

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

Kokeile itse

Esimerkki 4

Miten taustakuvan pisteasento käytetään pixeleissä:

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

Kokeile itse

Esimerkki 5

Luo peittävä taustakuva käyttämällä erilaisia taustao attribuutteja:

.hero-image {
  background-image: url("photographer.jpg"); /* Käytettävä kuva */
  background-color: #cccccc; /* Jos kuva ei ole saatavilla, käytä tätä väriä */
  height: 300px; /* On asetettava korkeus */
  background-position-x: center; /* Aseta kuva keskelle */
  background-repeat: no-repeat; /* Älä toista kuvaa */
  background-size: cover; /* Muuta taustakuvan kokoa, jotta se peittää koko kontin */
}

Kokeile itse

CSS syntax

background-position-x: value;

Ominaisuuden arvo

Arvo	Kuvaus
left	Aseta taustan sijainti x-akselin vasemmalle.
right	Aseta taustan sijainti x-akselin oikealle.
center	Aseta taustan sijainti x-akselin keskelle.
x%	x-akselin vasen puoli on 0%, oikea puoli 100%. Prosenttiosuus viittaa taustan sijainnin leveyteen vähennettynä taustakuvan leveydellä.
xpos	Horisontaalinen etäisyys vasemmalle. Yksiköt voivat olla pikseleitä (esim. 0px) tai muita CSS yksiköt.
xpos offset	kaksipainos syntax, tuettu vain Firefoxissa ja Safarissa. xpos Aseta vasemmaksi tai oikeaksi offset On taustakuvan vasemman tai oikean reunan horisontaalinen etäisyys taustakuvasta Yksiköt voivat olla pikseleitä tai muita CSS yksiköt.
initial	Aseta ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Periisiä isältä elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	0%
Perinnäisyys:	ei
Animaation tekeminen:	Tuki. Katso:Animaatioon liittyvät ominaisuudet.
Versio:	CSS3
JavaScript syntax:	object.style.backgroundPositionX="center"