Ιδιότητα background-position-x

Η ιδιότητα background-position-x ορίζει την οριζόντια θέση της εικόνας φόντου ενός στοιχείου.

Η ιδιότητα μπορεί να πάρει τις ακόλουθες τιμές: left, center, right, και επίσης μπορείτε να καθορίσετε τη θέση του φόντου σε ποσοστά ή pixels.

Σύνταξη

cssεπιλογέας {
  background-position-x: τιμή;
}

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου αριστερά οριζόντια:

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;
}

Результат:

Παράδειγμα

Και τώρα ας μετακινήσουμε το φόντο προς τα δεξιά:

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;
}

Результат:

Παράδειγμα

Ας τοποθετήσουμε την εικόνα φόντου στο κέντρο:

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;
}

Результат:

Παράδειγμα

Και τώρα ας καθορίσουμε τη θέση για το φόντο σε ποσοστά:

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;
}

Результат:

Δείτε επίσης