Ιδιότητα background-position

Η ιδιότητα background-position ορίζει τη θέση της εικόνας φόντου ενός στοιχείου. Η θέση μπορεί να οριστεί χρησιμοποιώντας οποιεσδήποτε μονάδες για μεγέθη. Η πρώτη τιμή υποδηλώνει παρεμβολή από αριστερά, η δεύτερη - παρεμβολή από πάνω.

Μπορεί επίσης να οριστεί η θέση με λέξεις-κλειδιά. Σε αυτή την περίπτωση η σειρά των τιμών δεν έχει σημασία. Λέξεις-κλειδιά για την κάθετη: top, center, bottom. Λέξεις-κλειδιά για την οριζόντια: left, center, right.

Πώς να χρησιμοποιείτε τις λέξεις-κλειδιά

Για να τοποθετήσετε μια εικόνα με λέξη-κλειδί, πρέπει να ορίσετε μια τιμή για την κάθετη και μια για την οριζόντια. Για παράδειγμα, εάν ορίσετε την τιμή top right, τότε η εικόνα θα τοποθετηθεί πάνω δεξιά.

Η σειρά των λέξεων δεν έχει σημασία: μπορείτε να γράψετε top right, ή μπορείτε - right top. Εάν υπάρχει η λέξη-κλειδί center - μπορεί να παραλειφθεί. Για παράδειγμα, το top center, είναι το ίδιο με απλώς top. Και το center center είναι το ίδιο με απλώς center.

Σύνταξη

cssεπιλογέας {
  background-position: δύο τιμές διαχωρισμένες με κενό;
}

Παράδειγμα

Από προεπιλογή η εικόνα φόντου θα βρίσκεται στην επάνω αριστερή γωνία:

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

css#elem {
  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: top 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: bottom 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: right 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: center center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Δείτε επίσης