Sifa background-position-x

Sifa background-position-x inaweka msimamo wa picha ya usuli wa kipengele kwa usawa.

Sifa inaweza kukubali maadili yafuatayo: left, center, right, na pia unaweza kubainisha msimamo wa usuli kwa asilimia au saizi.

Kiendeshaji

csskichagua {
  background-position-x: thamani;
}

Mfano

Wacha tuweke picha ya usuli upande wa kushoto kwa usawa:

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

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

Результат:

Mfano

Sasa hebu tusogeze usuli upande wa kulia:

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

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

Результат:

Mfano

Wacha tuweke picha ya usuli katikati:

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

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

Результат:

Mfano

Sasa tubainishe msimamo wa usuli kwa asilimia:

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

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

Результат:

Angalia pia