A background-position-x tulajdonság

A background-position-x tulajdonság egy elem háttérképének vízszintes helyzetét határozza meg.

A tulajdonság a következő értékeket veheti fel: left, center, right, valamint a háttér pozíciója megadható százalékban vagy pixelben is.

Szintaxis

szelektor {
	background-position-x: érték;
}

Példa

Helyezzük a háttérképet balra vízszintesen:

<div id="elem"></div>

#elem {
	background-position-x: left;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Példa

Most pedig mozgassuk a hátteret jobbra:

<div id="elem"></div>

#elem {
	background-position-x: right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Példa

Helyezzük a háttérképet a középpontba:

<div id="elem"></div>

#elem {
	background-position-x: center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Példa

Most pedig adjuk meg a háttér pozícióját százalékban:

<div id="elem"></div>

#elem {
	background-position-x: 20%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lásd még

a background tulajdonság,
amely a háttérre vonatkozó rövidített tulajdonság
a background-position-y tulajdonság,
amely a háttér függőleges pozícióját határozza meg