rooster

CSS Referentie Handboek

CSS-eigenschappen

Verplichte cursus

Cursus aanbeveling:

CodeW3C.com tassendoos

CSS background-position-x Eigenschap

vorige pagina background-position
Volgende pagina background-position-y

Definitie en gebruik

background-position-x Eigenschap stelt de positie van de achtergrondafbeelding op de x-as in.

Tip:Standaard wordt de achtergrondafbeelding geplaatst in de linkerbovenhoek van het element en herhaald in zowel verticale als horizontale richting.

Voorbeeld

Voorbeeld 1

Hoe achtergrondafbeeldingen op de x-as te positioneren:

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

probeer het zelf

Voorbeeld 2

Hoe achtergrondafbeeldingen aan de rechterkant te positioneren:

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

probeer het zelf

Voorbeeld 3

Hoe achtergrondafbeeldingen met percentages te positioneren:

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

probeer het zelf

Voorbeeld 4

Hoe achtergrondafbeeldingen met pixels te positioneren:

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

probeer het zelf

Voorbeeld 5

Maak een achtergrondafbeelding die de container overslaat met verschillende achtergrondkenmerken:

.hero-image {
  background-image: url("photographer.jpg"); /* Gebruikte afbeelding */
  background-color: #cccccc; /* Gebruik deze kleur als de afbeelding niet beschikbaar is */
  height: 300px; /* Het is vereist om de hoogte in te stellen */
  background-position-x: center; /* Plaats de afbeelding centreren */
  background-repeat: no-repeat; /* Herhaal de afbeelding niet */
  background-size: cover; /* Pas de grootte van de achtergrondafbeelding aan om de hele container te bedekken */
}

probeer het zelf

CSS syntaxis

background-position-x: value;

eigenschapswaarde

waarde	beschrijving
left	de achtergrondpositie op de linkerkant van de x-as plaatsen.
right	de achtergrondpositie op de rechterkant van de x-as plaatsen.
center	de achtergrondpositie op de x-as centreren.
x%	de linkerkant van de x-as is 0%, de rechterkant is 100%. percentagewaarden verwijzen naar de breedte van het achtergrondpositiegebied minus de breedte van de achtergrondafbeelding.
xpos	de horizontale afstand van de linkerkant. De eenheid kan pixels zijn (zoals 0px) of andere CSS Eenheid.
xpos offset	tweevoudige syntaxis, alleen ondersteund in Firefox en Safari. xpos instellen op left of right offset is de horizontale afstand van de linkerkant van de achtergrondafbeelding of de rechterkant van de xpos ingesteld de eenheid kan pixels zijn of andere CSS Eenheid.
initial	deze eigenschap instellen op zijn standaardwaarde. Raadpleeg initial.
inherit	deze eigenschap van de ouderlijke elementen overnemen. Raadpleeg inherit.

technische details

standaardwaarde:	0%
inheritance:	nee
animatie maken:	ondersteund. Raadpleeg:animatiegerelateerde eigenschappen.
versie:	CSS3
JavaScript syntaxis:	object.style.backgroundPositionX="center"